Twitter Bootstrap Dropdown with Tabs inside [英] Twitter Bootstrap Dropdown with Tabs inside

问题描述

我正在尝试使用其中的标签制作下拉菜单。问题是当我点击一个标签时下拉菜单会关闭。看到这个演示： http://jsfiddle.net/timrpeterson/pv2Lc/2/ 。 （代码复制如下）。

在标签定位点上引用了建议 stopPropagation（） 似乎没有帮助。有没有更好的方法？

 < script src ='http：//netdna.bootstrapcdn.com/bootstrap/3.1。 0 / JS / bootstrap.min.js'>< /脚本> 
< link href ='http：//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css'rel =stylesheettype =text / css/> 
 
< div class =dropdown> 
< a id =dLabelrole =buttondata-toggle =dropdowndata-target =＃href =/ page.html> 
下拉式< span class =caret>< / span> 
< / a> 
< ul class =dropdown-menurole =menuaria-labelledby =dLabel> 
 
< ul class =nav nav-tabs> 
< li class =active>< a href =＃homedata-toggle =tab>主页< / a> < /锂> 
< li>< a href =＃profiledata-toggle =tab>个人资料< / a>< / li> 
< li>< a href =＃messagesdata-toggle =tab>邮件< / a>< / li> 
< / ul> 
 
 <！ -   - 标签窗格 - > 
< div class =tab-content> 
< div class =tab-pane activeid =home> HOME asdfasdfsda< / div> 
< div class =tab-paneid =profile> PROFILE asdfafas< / div> 
< div class =tab-paneid =messages> MESSAGES asdfdas< / div> 
< / div> 
< / ul> 
< / div> 
  

解决方案

使用特定的引导程序事件： hide.bs.dropdown （在下拉即将关闭时触发）允许您通过调用 e.preventDefault（）。 （ doc here ， scrolldown components）



当用户点击一个标签时，你可以激活一个特殊标志，并检查 hide.bs中的标志.dropdown 事件在下拉列表中：

  $（'＃myTabs'）。on（'click '，'.nav-tabs a'，function（）{
 //在'.dropdown'元素上设置一个特殊的类
 $（this）.closest（'。dropdown'）。addClass（ ''）; 
 $）
 $ b $（'＃myDropDown'）。on（'hide.bs.dropdown'，function（e）{
 if（$ this）.hasClass（'dontClose'））{
 e.preventDefault（）; 
} 
 $（this）.removeClass（'dontClose'）; 
}）; 
  

小提琴

（我为您的示例添加了html id，根据您的需要更改选择器）

I'm trying to make a dropdown menu with tabs inside of it. The problem is the dropdown closes when I click a tab. See this demo: http://jsfiddle.net/timrpeterson/pv2Lc/2/. (code reproduced below).

The cited suggestion to stopPropagation() on the tabs anchors doesn't seem to help. Is there a better way?

<script src='http://netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js'></script>
<link href='http://netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css' rel="stylesheet" type="text/css"/>

<div class="dropdown">
  <a id="dLabel" role="button" data-toggle="dropdown" data-target="#" href="/page.html">
    Dropdown <span class="caret"></span>
  </a>
  <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">

    <ul class="nav nav-tabs">
      <li class="active"><a href="#home" data-toggle="tab">Home</a>           </li>
      <li><a href="#profile" data-toggle="tab">Profile</a></li>
      <li><a href="#messages" data-toggle="tab">Messages</a></li>
    </ul>

    <!-- Tab panes -->
    <div class="tab-content">
      <div class="tab-pane active" id="home">HOME asdfasdfsda</div>
      <div class="tab-pane" id="profile">PROFILE asdfafas</div>
      <div class="tab-pane" id="messages">MESSAGES asdfdas</div>
    </div>
  </ul>
</div>

解决方案

Use the specific bootstrap events : the hide.bs.dropdown (triggered when the dropdown is about to close) allows you to cancel the "hide" action by calling e.preventDefault(). (doc here, list of specific bootstrap events for scrolldown components)

You can activate a special flag when the user clicks on a tab, and check that flag in the hide.bs.dropdown event on the dropdown :

$('#myTabs').on('click', '.nav-tabs a', function(){
    // set a special class on the '.dropdown' element
    $(this).closest('.dropdown').addClass('dontClose');
})

$('#myDropDown').on('hide.bs.dropdown', function(e) {
    if ( $(this).hasClass('dontClose') ){
        e.preventDefault();
    }
    $(this).removeClass('dontClose');
});

fiddle
(I added html ids to your example, change the selectors according to your needs)

这篇关于Twitter Bootstrap Dropdown with Tabs inside的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！