带有下拉列表的Bootstrap面板选项卡

Question

以下是带有标签和下拉列表的面板示例： http://bootsnipp.com/snippets/featured/panels-with-nav-tabs

有没有办法让下拉按钮充当选项卡本身，只有当您单击选项卡的特定部分时才会显示下拉列表（仅当您单击箭头而不是选项卡的其余部分时）。

Answer 1

这是你想要的那种东西吗？

如果是这样，您可以将按钮的主按钮和下拉部分放在按钮组中，如下所示：

<div class="btn-group">
  <button class="btn btn-default" onclick="window.location.href='#'">
    Split Dropdown
  </button>

  <button data-toggle="dropdown" class="btn btn-default dropdown-toggle">
    <span class="caret"></span>
  </button>

  <ul class="dropdown-menu">
    <li><a href="#">Dropdown Menu item 1</a></li>
    <li><a href="#">Dropdown Menu item 2</a></li>
  </ul>
</div>

Here是其中的一个小提琴。 （确保在您自己的项目中包含Bootstrap和JQuery资源链接。）

更新： Here是一种类似方法的小提琴。

这就是它的样子：

这是相关的代码（小提琴中的完整代码）：

<div class="container">
  <div class="panel with-nav-tabs panel-default">
    <div class="panel-heading">
      <ul class="nav nav-tabs">

        <!-- Other tabs here -->

        <li class="dropdown btn-group">
          <a class="btn" href="#tab-main" data-toggle="tab">Tab w/ Dropdown - Main Tab</a>
          <a data-toggle="dropdown" class="btn dropdown-toggle">
            <span class="caret"></span>
          </a>
          <ul class="dropdown-menu" role="menu">
            <li><a href="#tab-dropdown1" data-toggle="tab">Tab w/ Dropdown - Dropdown 1</a></li>
            <li><a href="#tab-dropdown2" data-toggle="tab">Tab w/ Dropdown - Dropdown 2</a></li>
          </ul>
        </li>

      </ul>
    </div>
    <div class="panel-body">
      <div class="tab-content">

        <!-- Other panes here -->

        <div class="tab-pane fade" id="tab-main">Tab w/ Dropdown - Main Tab</div>
        <div class="tab-pane fade" id="tab-dropdown1">Tab w/ Dropdown - Dropdown 1</div>
        <div class="tab-pane fade" id="tab-dropdown2">Tab w/ Dropdown - Dropdown 2</div>
      </div>
    </div>
  </div>
</div>

我在这种方法中遇到的唯一问题是，如果您在下拉菜单中，则无法先返回该选项卡的主面板而不先单击其他选项卡。这是因为main和下拉选项卡都获得active类，这会禁用选项卡（除了添加指示选项卡的样式之外）。如果这是一个问题，您应该能够使用一些JavaScript来解决它。