为什么单击选项卡面板项时导航栏 Bootstrap 菜单会折叠关闭

Question

我想在 navbar 菜单中使用 Bootstrap tab panel，如下所示：

<div class="collapse navbar-collapse" id="navbar-collapseId">
  <ul class="nav navbar-nav">
    <li class="dropdown" id="brandMenu1">
      <a href="#" class="dropdown-toggle" id="brandMenu" 
         data-toggle="dropdown" role="button" aria-expanded="false">Brands 
         <span class="caret"></span></a>
       <ul class="dropdown-menu">
         <li>
             <ul class="nav nav-tabs">
                  <li class=""><a role="tab" data-toggle="tab" 
                  href="#tabA">A</a></li>
                  <li class=""><a role="tab" data-toggle="tab"
                  href="#tabB">B</a></li>
             </ul>
         </li>
       </ul>
   <div class="tab-content">
     <div class="tab-pane" id="tabA">
       <div class="col-xs-12 col-sm-4">Aigner</div>
       <div class="col-xs-12 col-sm-4">Acqua di Parma</div>
     </div>
   </div>
 </li>
</ul>
</div>

当我想打开选项卡面板项目之一并单击它时，整个导航栏菜单会折叠（关闭）。我该如何解决这个问题？

Answer 1

将以下 javascript 代码添加到您的网页

$(document).on('click', ' .dropdown-menu', function (e) { e.stopPropagation(); });

例如click here.

为什么单击选项卡面板项时导航栏 Bootstrap 菜单会折叠关闭

why navbar Bootstrap menu collapse close when click tab panel item

tabpanel

twitter-bootstrap

twitter-bootstrap-3