0

我正在尝试用 Bootstrap 组合一个小下拉菜单。我在这里的 JSFiddle 上放了一个示例。

这个想法是让每个按钮触发一个不同的下拉列表，以便单击文件为您提供包含新建和关闭的下拉列表，单击编辑为您提供包含复制、粘贴和撤消等的下拉列表。

但是，我得到所有按钮的相同下拉列表。我肯定做错了什么。

我还查看了这个由StackOverflow 问题链接到的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

2

这应该做你想要的：

<div id="mainMenubar">
  <button class="btn" href="#" onclick="alert('Hello!');">Menu</button>
  <div class="btn-group">
    <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>
  </div>
  <div class="btn-group">
    <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>
  </div>
  <div class="btn-group">
    <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>
</div>

编辑为导航栏添加样式，如下所述：

.navbar {
  display: table;
}

.navbar .nav > li > a {
  padding: 5px;
}

.navbar-inner {
  min-height: 0
}
于 2013-05-08T15:50:10.950 回答
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 回答