Question

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

考虑一下： enter image description here

如果我按下“Dropdown”的下角，我想显示如下的下拉菜单： enter image description here

如果我选择@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。我在nav中添加了一类.split-button-nav，以便在CSS中定位元素。您可以看到类.nav-justified也已添加，并且没有任何问题。

Working jsFiddle here

Answer 2

我做到了。调整实际上非常简单。

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

<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 bootstrap，如下拉按钮。当然，还有很多改进的余地。我也不太擅长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();

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

3 个答案: