5

Twitter Bootstrap のシンプルなドロップダウン ボタンを使用しようとしています。ただし、ドロップダウン オプションは表示されません。コードは以下にあり、フィドルへのリンクは次のとおりです。http://jsfiddle.net/nunos/DjHyQ/11/

編集：問題を発見しました。に を含めていbootstrap.jsました<head>。Twiiter Bootstrap Documentation に実際に記載されているように、その行をに変更する<body>と、すぐに機能しました。と に含まれるスクリプトに違いがあるとは思いもしませんでし<head>た<body>。今私は知っている！

<div class="btn-toolbar" style="margin: 0;">
    <div class="btn-group">
        <button class="btn btn-primary dropdown-toggle" data-toggle="dropdown">Action <span class="caret"></span></button>
        <ul class="dropdown-menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li class="divider"></li>
            <li><a href="#">Separated link</a></li>
        </ul>             
    </div>
</div>
​
4

4 に答える 4

1

これは、 jQuery と Bootstrap がロードされた作業フィドルです。

<div class="btn-toolbar" style="margin: 0;">
    <div class="btn-group">
        <button class="btn btn-primary dropdown-toggle" data-toggle="dropdown">Action <span class="caret"></span></button>
        <ul class="dropdown-menu" role="menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li class="divider"></li>
            <li><a href="#">Separated link</a></li>
        </ul>             
    </div>
</div>
于 2012-12-07T16:00:51.733 に答える
1

フレームワークとして jquery (ブートストラップ ウィジェットに必要) を選択していないため、投稿したフィドルは機能しません (選択ボックスはページの右側のサイドバーにあります)。実際のコードにjqueryをロードしていますか?

于 2012-12-07T15:54:40.013 に答える
0

「ul」要素にクラスドロップダウンを追加する必要があります。

<div class="btn-toolbar" style="margin: 0;">
    <div class="btn-group">
        <button class="btn btn-primary dropdown-toggle" data-toggle="dropdown">Action <span class="caret"></span></button>
        <ul class="dropdown dropdown-menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li class="divider"></li>
            <li><a href="#">Separated link</a></li>
        </ul>             
    </div>
</div>

ここで動作を確認できます。http://jsfiddle.net/DjHyQ/13/

于 2012-12-07T16:02:46.690 に答える