Bootstrap jQuery Tabs在Dropdown中不起作用

Question

 $('.dropdown-menu li').on('click', function(event){ //The event won't be propagated to the document NODE and // therefore events delegated to document won't be fired event.stopPropagation(); }); $('.dropdown-menu li').on('click', function(event){ //The event won't be propagated to the document NODE and // therefore events delegated to document won't be fired event.stopPropagation(); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/> <li class="dropdown messages-menu"> <!-- Menu toggle button --> <a href="#" class="dropdown-toggle" data-toggle="dropdown"> <span class="caret"></span> </a> <div class="dropdown-menu"> <ul class="nav nav-tabs" id="myTab"> <li class="active"><a data-target="#home" data-toggle="tab">Home</a></li> <li><a data-target="#profile" data-toggle="tab">Profile</a></li> <li><a data-target="#messages" data-toggle="tab">Messages</a></li> </ul> <div class="tab-content"> <div class="tab-pane active" id="home">Home</div> <div class="tab-pane" id="profile">Profile</div> <div class="tab-pane" id="messages">Message</div> </div> </div> </li> 

Hai, I was trying to develop the code in which I want the dropdown-menu to close when I click outside of the dropdown-menu , I succeed in this but here I got a problem when I insert nav-tabs in dropdown-menu the tabs are not working.

here's the fiddle link https://jsfiddle.net/zeasts/gz15c52a/

Thanks in advance

zeasts

Answer 1

You are stop propagating the event on click of li, this is causing the selection of tab to break. Since you need to stop event propagation to avoid the closing of the drop down, you will have to select the tab manually.You can achieve this by below code.

$( document ).ready(function() {
$('.dropdown-menu li').on('click', function(event){
//The event won't be propagated to the document NODE and 
// therefore events delegated to document won't be fired
   event.stopPropagation();
 });

 $('.dropdown-menu li').on('click', function(event){
   //The event won't be propagated to the document NODE and 
   // therefore events delegated to document won't be fired
   event.stopPropagation();
 });

 $('.dropdown-menu > ul > li > a').on('click', function(event){
  event.stopPropagation();
  $(this).tab('show')
 });
});

Updated Snippet

  $( document ).ready(function() { $('.dropdown-menu li').on('click', function(event){ //The event won't be propagated to the document NODE and // therefore events delegated to document won't be fired event.stopPropagation(); }); $('.dropdown-menu li').on('click', function(event){ //The event won't be propagated to the document NODE and // therefore events delegated to document won't be fired event.stopPropagation(); }); $('.dropdown-menu > ul > li > a').on('click', function(event){ event.stopPropagation(); $(this).tab('show') }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/> <li class="dropdown messages-menu"> <!-- Menu toggle button --> <a href="#" class="dropdown-toggle" data-toggle="dropdown"> <span class="caret"></span> </a> <div class="dropdown-menu"> <ul class="nav nav-tabs" id="myTab"> <li class="active"><a data-target="#home" data-toggle="tab">Home</a></li> <li><a data-target="#profile" data-toggle="tab">Profile</a></li> <li><a data-target="#messages" data-toggle="tab">Messages</a></li> </ul> <div class="tab-content"> <div class="tab-pane active" id="home">Home</div> <div class="tab-pane" id="profile">Profile</div> <div class="tab-pane" id="messages">Message</div> </div> </div> </li>