Bootstrap jQuery 选项卡在下拉列表中不起作用

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>

嗨，我正在尝试开发代码，当我在 dropdown-menu 之外单击时，我希望在其中关闭 dropdown-menu，我成功了，但在这里我遇到了问题在 dropdown-menu 中插入 nav-tabs 选项卡不起作用。

这里是 fiddle link https://jsfiddle.net/zeasts/gz15c52a/

提前致谢

热情

Answer 1

您正在停止传播单击 li 的事件，这导致 select 选项卡的离子中断。由于您需要停止事件传播以避免关闭下拉列表，因此您必须 select 选项卡 manually.You 可以通过以下代码实现此目的。

$( 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')
 });
});

更新的代码段

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

Bootstrap jQuery 选项卡在下拉列表中不起作用

Bootstrap jQuery Tabs are not working in Dropdown

javascript

jquery

navbar

twitter-bootstrap

drop-down-menu

热情