Twitter Bootstrapドロップダウンが動作しない

このTwitter Bootstrapドロップダウンが機能しない理由はありますか？頭の中でTwitter Bootstrapドロップダウンが動作しない

Javascriptを：

<script src="/assets/js/bootstrap.js" type="text/javascript"></script>

メニューHTML：

   <li class="dropdown"> 
       <a data-target="#" data-toggle="dropdown" class="dropdown-toggle" href="#">Dropdown menu here... 
        <b class="caret"></b> 
       </a> 
       <ul class="dropdown-menu"> 
        <li><a href="/app/1">Item A</a></li> 
        <li><a href="/app/2">Item B</a></li> 
        <li><a href="/app/3">Item C</a></li> 
       </ul> 
       </li>

出典

2012-09-21 Snowcrash

あなたのjsはどのような順序でロードされていますか？ jQueryはいつものように最初に、ブートストラップは2番目に行く。 –

bootstrap.js（bootstrap.min.jsではなく）がある場合は、bootstrap-dropdown.jsも追加しないでください。それが私のトリックでした。 – Fahrenheit

dom-readyに追加してみてください：$（ '。dropdown-toggle'）。dropdown（）; – user956584

がli自体ではなく、liをラップしているdivの上のドロップダウンクラスを置きます。このような...

 <div class="dropdown"> 
     <a class="dropdown-toggle" data-toggle="dropdown" href="#">Dropdown trigger</a> 
     <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel"> 
     ... 
     </ul> 
     </div>

例はbootstrap site

からあなたのコードは次のようになります...

<!DOCTYPE html > 
    <head> 
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script> 
    <script type="text/javascript" src="../plugins/js/bootstrap-dropdown.js"></script> 
    <link href="../theme/bootstrap.css" rel=stylesheet type="text/css"> 

    </head> 
    <div class="dropdown"> 
     <ul class="dropdown"> 
     <a data-target="#" data-toggle="dropdown" class="dropdown-toggle" href="#">Dropdown menu here... 
      <b class="caret"></b> 
     </a> 
      <ul class="dropdown-menu"> 
       <li><a href="/app/1">Item A</a></li> 
       <li><a href="/app/2">Item B</a></li> 
       <li><a href="/app/3">Item C</a></li> 
      </ul> 
     </ul> 
    </div>

私はネストされたリストを作ってみましたが、それはなかったことブートストラップで動作します。私はそれが混乱した2つのドロップダウンを得ると思う。

出典

2012-09-21 17:46:18 noel

私はそれを試みました、そして、それはひどく見えます。プラスそれは動作しません。彼らのウェブサイトをチェックして、それは彼らがそれをやっている方法ではありません。例えば。 http://twitter.github.com/bootstrap/javascript.html#dropdowns – Snowcrash

私の例をサイトから直接コピーして貼り付けました。私はあなたが意味することを理解していません。あなたのサイトの例が必要です。 – noel

これは実際に動作する最初のコードです。ありがとう。 –

最新バージョンのJQueryを使用していることを確認してください

出典

2013-05-11 13:04:17

これは簡単に解決します。あなたのコードをラッピングする要素はliですが、divでなければなりません。これは私の作品：

<div class="dropdown"> 
    <a data-target="#" data-toggle="dropdown" class="dropdown-toggle" href="#">Dropdown menu here... 
    <b class="caret"></b> 
    </a> 
    <ul class="dropdown-menu"> 
    <li><a href="/app/1">Item A</a></li> 
    <li><a href="/app/2">Item B</a></li> 
    <li><a href="/app/3">Item C</a></li> 
    </ul> 
</div>

enter image description here

あなたはそれがボタンのように見えるようにしたい場合は、ちょうどこのようなクラスのリストに "BTN" を追加します。

<a data-target="#" data-toggle="dropdown" class="dropdown-toggle btn" href="#">

マイヘッダセクションは次のようになります。

<link rel='stylesheet' type='text/css' href='css/bootstrap.min.css'> 
<link rel='stylesheet' type='text/css' href='css/bootstrap-responsive.min.css'> 
<script src='js/jquery-2.0.0.min.js' type='text/javascript'> 
<script src='js/bootstrap.min.js' type='text/javascript'>

You maあなたがモバイルデバイスのために何もしていないなら、yは反応的なCSSを残したいと思う。

出典

2013-06-17 14:15:34 Graham

Twitter Bootstrapドロップダウンが動作しない

答えて

関連する問題