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

Question

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

<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。