8

この 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>
4

3 に答える 3

7

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

        <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>

その例はブートストラップサイトからのものです

コードは次のようになります...

    <!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-21T17:46:18.307 に答える
2

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

于 2013-05-11T13:04:17.707 に答える
2

これは簡単に解決できます。コードをラップする要素は 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>

ここに画像の説明を入力

ボタンのように見せたい場合は、次のようにクラス リストに「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'>

モバイル デバイス用に何もしていない場合は、レスポンシブ CSS を除外することをお勧めします。

于 2013-06-17T14:15:34.660 に答える