0

Bootstrapで小さなドロップダウンメニューをまとめようとしています。JSFiddle hereにサンプルを掲載しました。

各ボタンが異なるドロップダウン リストをトリガーするようにすることで、[ファイル] をクリックすると [新規] と [閉じる] を含むドロップダウンが表示され、[編集] をクリックすると [コピー]、[貼り付け] と [元に戻す] などを含むドロップダウンが表示されます。

ただし、すべてのボタンで同じドロップダウンが表示されます。きっと何か悪いことをしたに違いない。

この StackOverflow questionによってリンクされているこの JSFiddleも見ましたが、機能していないようです-クリックしてもドロップダウンがまったく表示されません。

なにか提案を？

以下は HTML のコピーです。

<div id="mainMenubar" class="btn-group">
    <button class="btn" href="#" onclick="alert('Hello!');">Menu</button>
    <button href="#" class="btn dropdown-toggle" role="button" data-toggle="dropdown">File</button>
    <ul id="fileMenuSelector" class="dropdown-menu">
        <li><a href="#">New</a></li>
        <li><a href="#">Close</a></li>
    </ul>
    <button href="#" class="btn dropdown-toggle" data-toggle="dropdown">Edit</button>
    <ul id="editMenuSelector" class="dropdown-menu">
        <li><a href="#">Copy</a></li>
        <li><a href="#">Paste</a></li>
        <li><a href="#">Undo</a></li>                   
    </ul>
    <button href="#" class="btn dropdown-toggle" data-toggle="dropdown">Debug</button>
    <ul id="debugMenuSelector" class="dropdown-menu">
        <li><a href="#">Some Debug</a></li>
        <li><a href="#">Show XML</a></li>
        <li><a href="#">Show Log</a></li>
        <li><a href="#">Shut down the lot</a></li>
    </ul>
</div>
4

3 に答える 3

1

代わりに、ボタン内でリンク (アンカー) を使用してドロップダウンをトリガーする必要があると思います...

       <button class="btn btn-group">
            <a class="btn dropdown-toggle" data-toggle="dropdown" href="#">
                File 
                <span class="caret"></span>
            </a>
            <ul class="dropdown-menu">
                <li><a href="#">New</a></li>
                <li><a href="#">Close</a></li>
            </ul>
        </button>

これが実際のデモです

編集:これは、.btn-toolbar 内の代替バージョンで、各ドロップダウンが独自の btn-group 内にあるようにします。これはFireFoxで動作します: http://bootply.com/61019

于 2013-05-08T16:34:06.157 に答える
1

私はこれが4年近く前のものであることを知っていますが、同じ問題に出くわしました. ZimSystem は正しい答えを持っていますが、彼のコードをコピーして貼り付けると、まだ空白が残っているとのことでした。それは、彼のコードが正しい css スタイル内にラップされていないためです。

ドロップダウンとボタンのスタイルが同じグループに入れられたときに乱雑に見えないのは良いことですが、厄介なのはドロップダウンが正しく機能しないことです。

とにかく、これは変更とbootstrap.cssを使用しない実際のコード例です

<div class="input-group">
  <input type="text" class="form-control" aria-label="...">
  <div class="input-group-btn">
    <div class="btn-group">
      <button type="button" class="btn btn-default" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Action <span class="caret"></span></button>
      <ul class="dropdown-menu dropdown-menu-right">
        <li><a href="#">Action</a></li>
        <li><a href="#">Another action</a></li>
        <li><a href="#">Something else here</a></li>
        <li role="separator" class="divider"></li>
        <li><a href="#">Separated link</a></li>
      </ul>
    </div>
    <div class="btn-group">
      <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Action <span class="caret"></span></button>
      <ul class="dropdown-menu dropdown-menu-right">
        <li><a href="#">Action</a></li>
        <li><a href="#">Another action</a></li>
        <li><a href="#">Something else here</a></li>
        <li role="separator" class="divider"></li>
        <li><a href="#">Separated link</a></li>
      </ul>
    </div>
  </div>
</div>

dropdown-toggleクラスは最後のボタンに配置されます。これは、端に境界線の半径を配置して、見栄えを良くして仕上げるためです。

これが他の誰かに役立つことを願っています。

于 2016-12-07T14:22:26.530 に答える