CODEWITHSUNDEEP
javascriptjquerytwitter-bootstrapdrop-down-menunavbar
Riot Zeast Captain
Riot Zeast Captain

Reputation: 968

Bootstrap jQuery Tabs are not working in Dropdown

$('.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

Upvotes: 0

Views: 1745

Answers (1)

Deep
Deep

Reputation: 9794

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>

Upvotes: 1

Related Questions