3

我想知道如何建立一个带有子菜单的 btn 组。

<div class="btn-group">
  <a class="btn dropdown-toggle" data-toggle="dropdown" href="#">
    Action
    <span class="caret"></span>
  </a>
  <ul class="dropdown-menu">
    <!-- dropdown menu links -->
  </ul>
</div>

我喜欢把它放在 btn 组中：

<ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
  ...
  <li class="dropdown-submenu">
    <a tabindex="-1" href="#">More options</a>
    <ul class="dropdown-menu">
      ...
    </ul>
  </li>
</ul>

这就是我想要的：（但使用 twiiter-bootstrap） 这就是我要的

4

2 回答 2

3

说明：基本上这个btn可以去任何地方，我只是把它放在一个按钮组中，以表明这个按钮没有什么特别之处。

因此，首先，您想将 data-toggle= 下拉菜单添加到您的按钮。然后，您需要将标准下拉菜单添加到按钮。我想这里的关键是知道没有什么可以阻止您将第二个下拉菜单添加到子菜单中。

因此，请先将子菜单添加到您想要的任何 < li > 中，然后在其中添加另一个下拉菜单。所以本质上我们有 Button -> 下拉菜单 -> 下拉子菜单 -> 下拉菜单 -> 子元素。我认为有点令人困惑但很直截了当

<div class="btn-toolbar">
<div class="btn-group">

    <div class="btn-group">
      <!--start of dropdown button -->
      <button class="btn dropdown-toggle" data-toggle="dropdown">Dropdown Button <span class="caret"></span></button>
      <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
         <li class="dropdown-submenu">
           <a tabindex="-1" href="#">More options</a>
           <ul class="dropdown-menu">
                <li><a tabindex="-1" href="#">Regular link</a></li>
                <li><a tabindex="-1" href="#">Regular link</a></li>
                <li><a tabindex="-1" href="#">Regular link</a></li>
           </ul>
         </li>
     </ul>
    </div>
    <!--end of dropdown button -->
    <button class="btn">Middle</button>
    <button class="btn">Right</button>
</div>
</div>

编辑：

在玩了这个之后，我意识到你确实需要

<div class="btn-group">

包装按钮，即使它只是独立的。我创建了这个更新的小提琴来演示它。
http://jsfiddle.net/jamiematthews/yWrRA/1/

于 2013-02-13T20:59:16.587 回答
1

进行了一些实验，但这是你如何去做的：

http://jsfiddle.net/ewQTE/2/

<div class="btn-toolbar">
<div class="btn-group">

    <div class="btn-group">
      <button class="btn dropdown-toggle" data-toggle="dropdown">Left <span class="caret"></span></button>
      <ul class="dropdown-menu">
          <li><a href="#">Dropwn Link #1</a></li>
          <li><a href="#">Dropwn Link #2</a></li>
      </ul>
    </div>

    <button class="btn">Middle</button>
    <button class="btn">Right</button>
</div>
</div>
于 2013-02-13T15:58:29.983 回答