css - 带下拉菜单的 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是它的一个 fiddle 在行动。 (确保在您自己的元素中包含 Bootstrap 和 JQuery 资源链接。)

更新: Here是一个类似方法的 fiddle ，并入面板。

这是它的样子:

这是相关代码( fiddle 中的完整代码):

<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>

我发现这种方法的唯一问题是，如果您在下拉面板上，则必须先单击其他选项卡才能返回到该选项卡的主面板。这是因为主选项卡和下拉选项卡都获得了 active 类，它会停用选项卡(除了添加指示选项卡已选中的样式之外)。如果这是一个问题，您应该能够使用一些 JavaScript 解决它。