下拉选项卡与拆分按钮下拉行为

Question

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

考虑一下：

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

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

Answer 1

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

这是下拉选项卡所需的代码。请注意，这是从一个正常的自举下拉选项卡稍有不同：

<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"); 
    } 
}); 

当然还需要进一步小的调整

，但是这是一个半完整的解决方案（并以图形方式完成）

UPDATE

我为此需求创建了jquery plugin。享受使用it

Answer 2

下面是一个不需要与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> 

标记中的标签按钮，然后将其浮动到右边，它将保留在为tab按钮保留的空间中，但隐藏在未悬挂的兄弟背后。我们只需要调整其z-索引以使其可见并可点击即可。

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

Working jsFiddle here。

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();