why navbar Bootstrap menu collapse close when click tab panel item

Question

I want use Bootstrap tab panel inside a navbar menu like this:

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

When i want open one of tab panel item and click it on, then whole the navbar menu collapse up (close). How can i fix this issue?

Answer 1

Add the following javascript code to your web page

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

For Example click here.