带有标签的 Twitter Bootstrap 下拉菜单 [英] Twitter Bootstrap Dropdown with Tabs inside

问题描述

我正在尝试制作一个带有标签的下拉菜单.问题是当我单击选项卡时下拉菜单关闭.请参阅此演示:http://jsfiddle.net/timrpeterson/pv2Lc/2/.(代码复制如下).

引用了对stopPropagation()的建议 选项卡上的锚点似乎没有帮助.有没有更好的办法?

<link href='http://netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css' rel="stylesheet" type="text/css"/><div class="下拉"><a id="dLabel" role="button" data-toggle="dropdown" data-target="#" href="/page.html">下拉</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><a href="#profile" data-toggle="tab">Profile</a></li><li><a href="#messages" data-toggle="tab">消息</a></li><!-- 标签窗格--><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>

解决方案

使用特定的引导事件:hide.bs.dropdown(在下拉列表即将关闭时触发)允许您取消通过调用 e.preventDefault() 来隐藏"操作.(此处的文档，scrolldown 组件的特定引导事件列表)

您可以在用户单击选项卡时激活一个特殊标志，并在下拉列表中的 hide.bs.dropdown 事件中检查该标志:

$('#myTabs').on('click', '.nav-tabs a', function(){//在 '.dropdown' 元素上设置一个特殊的类$(this).closest('.dropdown').addClass('dontClose');})$('#myDropDown').on('hide.bs.dropdown', function(e) {如果 ( $(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 下拉菜单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！