具有拆分按钮下拉行为的下拉选项卡

Question

我想使用下拉选项卡，但稍作调整：当我按下插入符号时，我想显示一个下拉菜单（不选择选项卡），而如果我按下选项卡语音或下拉菜单之一菜单项，选项卡将被选中。

考虑一下：

如果我按下“Dropdown”的向下插入符号，我想显示这样的下拉菜单：

如果我选择@fat 或@mdo，该选项卡将被选中，否则应将其设置回上面的原始版本。这是选项卡中正常下拉项的实际行为，但标题打开的是下拉菜单而不是打开选项卡，这就是我不想要的。换句话说，我可以打开的标签是三个而不是两个。那么：如何区分这两个组件呢？

Answer 1

这是一个不需要任何 JS 调整的解决方案：

只需使用a tab nav with dropdown 的正常标记

<ul class="nav nav-tabs nav-justified split-button-nav">
<li class="active"><a href="#">TAB</a></li>
<li><a href="#">TAB</a></li>
<li>
    <a href="#" class="dropdown-toggle" data-toggle="dropdown">
        <span class="caret"></span>
    </a>
    <a href="#" class="">Default</a>
      <ul class="dropdown-menu" role="menu">
        <li><a href="#">Action</a></li>
        <li><a href="#">Another action</a></li>
        <li><a href="#">Something else here</a></li>
        <li class="divider"></li>
        <li><a href="#">Separated link</a></li>
      </ul>
</li>
<li><a href="#">TAB</a></li>
</ul>

如果我们将下拉列表的链接放置在标记中的标签按钮上方，然后向右浮动，它将停留在为标签按钮保留的空间中，但隐藏在其未浮动的兄弟姐妹后面。我们只需要调整它的 z-index 以使其可见和可点击。

不需要额外的 JS。我在导航中添加了一个 .split-button-nav 类，以便定位 CSS 中的元素。可以看到.nav-justified这个类也被添加了，运行没有任何问题。

Working jsFiddle here.

Answer 2

我做到了。调整其实很简单。

这是下拉选项卡所需的代码。请注意，它与普通的引导下拉选项卡略有不同：

<ul class="nav nav-tabs myTabDrop">
  <li id="tabOccrs" class="dropdown">
    <a href="#" class="contentTab dropdown-toggle">Tab (<span class="tabsel">option1</span>) <span class="crtOpenDrop">▾</span></a>
    <ul class="dropdown-menu">
      <li><a href="#dropdown1" data-toggle="tab" class="subtab">Option1</a></li>
      <li><a href="#dropdown2" data-toggle="tab" class="subtab">Option2</a></li>
    </ul>
  </li> 
</ul>   

我们需要的jquery脚本如下：

$('.myTabDrop span.crtOpenDrop').click(function (e) {
    e.preventDefault();

    $(this).closest("a")
        .addClass("dropdown-toggle")
        .attr("data-toggle", "dropdown");
});


$('.myTabDrop a.contentTab').click(function (e) {
    e.preventDefault();

    if(! $(e.target).is("span")) {
        $(this).removeClass("dropdown-toggle")
            .attr("data-toggle", "")
            .tab("show");
    }
});

当然需要进一步的小调整，但这是一个半完整的解决方案（并且图形完整）

更新

我为此需要创建了一个jquery plugin。享受使用it

Answer 3

请参阅这个 jQuery 插件，用于 twitter 引导，如下拉按钮。当然，还有很大的改进空间。我也不擅长CSS。所以，我已经离开了那部分。

http://codepen.io/ismusidhu/pen/ptHql

HTML

<div id="quickActions" class="btn-group" data-key="split-button">
  <a data-name="quickAction" data-value="customer" data-defaultButton="true">New Customer</a>
  <button type="button" id="xyz" data-toggle="dropdown">
    <span class="caret"></span>
    <span class="sr-only">Toggle Dropdown</span>
  </button>
  <ul data-role="menu" hidden>
    <li><a data-name="quickAction" data-value="customer">Customer</a></li>
    <li><a data-name="quickAction" data-value="supplier">Supplier</a></li>
    <li><a data-name="quickAction" data-value="quote">Quote</a></li>
    <li><a data-name="quickAction" data-value="invoice">Invoice</a></li>
    <li><a data-name="quickAction" data-value="purchase">Purchase</a></li>
    <li><a data-name="quickAction" data-value="reconcile">Bank</a></li>
  </ul>
</div>

CSS

[data-key="split-button"].open > [data-role="menu"] {
  display: block;
}

插件

(function( $ ) {
// Plugin definition.
$.fn.splitButton = function(options) {

    // Iterate and reformat each matched element.
    return this.each(function() {

        var splitButton = $(this);
        var handle = $('[data-toggle="dropdown"]', splitButton);
        var buttons = $('ul li a', splitButton);
        var defaultButton = $('[data-defaultButton="true"]', splitButton);
        handle.click(function() {
            $(this).parent().toggleClass('open');
        });
      var clickHandler = function(e) {
            var $this = $(e.currentTarget);
            //alert($this.attr('data-value'));
            if (!$this.attr('data-defaultButton')) {
                defaultButton.attr("data-value", $this.attr('data-value')).html($this.html());
            }
        };
        buttons.click(clickHandler);
     defaultButton.click(clickHandler)

        $(document).click(function(event) {
            if (!$(event.target).closest(handle).length) {
                if ($(handle.parent()).hasClass("open")) {
                    $(handle.parent()).toggleClass('open');
                }
            }
        });
    });
};
})( jQuery );

用法

$('#quickActions').splitButton();