web-dev-qa-db-ja.com

セマンティックUIドロップダウンメニューが機能しない

Semantic-UIを使用してメニューを作成しようとしています。ドロップダウンメニューがまったく機能しません。ページのコピー Menu examples を取り、階層メニューを除くすべてを取り出して、別のファイルに配置しました。エラーはありませんが、ドロップダウンメニューのみが機能しません。誰が私が逃したことを教えてもらえますか？

<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="Content-Script-Type" content="text/jscript" />
    <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1" />    
    <link rel="stylesheet" type="text/css" class="ui" href="http://semantic-ui.com/build/packaged/css/semantic.min.css">
    <link rel="stylesheet" type="text/css" href="http://semantic-ui.com/stylesheets/semantic.css">  
    <script src="http://semantic-ui.com/javascript/library/jquery.min.js"></script>
    <script src="http://semantic-ui.com/javascript/library/history.js"></script>
    <script src="http://semantic-ui.com/javascript/library/easing.js"></script>
    <script src="http://semantic-ui.com/javascript/library/ace/ace.js"></script>
    <script src="http://semantic-ui.com/javascript/library/tablesort.js"></script>
    <script src="http://semantic-ui.com/javascript/library/waypoints.js"></script>
    <script src="http://semantic-ui.com/build/packaged/javascript/semantic.min.js"></script>
    <script src="http://semantic-ui.com/javascript/semantic.js"></script>
  </head>
  <body class="menu" >
    <div class="ui tiered menu">
      <div class="menu">
        <a class="active item">
          <i class="users icon"></i>
          Friends
        </a>
        <a class="item">
          <i class="grid layout icon"></i> Browse
        </a>
        <a class="item">
          <i class="mail icon"></i> Messages
        </a>
        <div class="right menu">
          <div class="item">
            <div class="ui icon input">
              <input type="text" placeholder="Search...">
              <i class="search icon"></i>
            </div>
          </div>
          <div class="ui dropdown item">
            More <i class="icon dropdown"></i>
            <div class="menu">
              <a class="item"><i class="edit icon"></i> Edit Profile</a>
              <a class="item"><i class="globe icon"></i> Choose Language</a>
              <a class="item"><i class="settings icon"></i> Account Settings</a>
            </div>
          </div>
        </div>
      </div>
      <div class="ui sub menu">
        <a class="active item">Search</a>
        <a class="item">Add</a>
        <a class="item">Remove</a>
      </div>
    </div>

  </body>
</html>
javascripthtmlsemantic-ui
45
P Hemans

次のようにドロップダウンを初期化する必要があります。

$('.ui.dropdown')
  .dropdown();

詳細情報があります [〜＃〜] here [〜＃〜]

91
Cyzanfar

1つの方法は、スクリプトを初期化する必要があるJSです。他の方法は、ドロップダウンにクラス「シンプル」を追加することです

<div class="ui simple dropdown item">
55
Mayank Chandak

既に述べたように、次のいずれかを実行できます。

  • JavaScriptを使用してドロップダウンを初期化するか、
  • simpleクラスを使用します。

これらの2つの方法には1つの非常に重要な違いがあります。simpleクラスを使用すると、ドロップダウンが機能するためにSemantic-UI Javascriptを必要としません 。 simpleクラスは:hoverセレクターを使用します。

Javascriptの初期化ではなくsimpleクラスを使用しても、ニースドロップダウン効果は得られないことに注意してください。

そのため、次のコードでは、ページにSemantic-UI Javascriptなしのドロップダウンメニューが表示されます。

<div class="ui simple dropdown item">
12
Tom

$('.ui.dropdown').dropdown();で初期化する場合は、ページがdropdown.jsを参照していることも確認してください

2
kmxr

指定された答えがあなたのために機能しなかった場合は、セマンティックUIとともにbootstrapを使用していないことを確認してください

1
ahmelq

簡単なメモ：

ドロップダウンが表示されず、Bootstrap=がセマンティックUIを使用して同じページにロードされている場合は、ブートストラップ後にセマンティックjsライブラリをロードしてください。

これは、bootstrap=とセマンティックUIの両方がドロップダウンメニューの表示に使用される同じ.dropdown()メソッドを持っているためです。 bootstrapは、存在する他のすべての.dropdown()メソッドをオーバーライドします。

0
John Zenith

上記の関数行を追加したとき、それは私と一緒に働いた

    <script> 
     $(document).ready(function(){
          $('.ui.dropdown') .dropdown();
    });
    </script>
0
ibrahim Mohamed