Bootstrap jQuery Tabs 在 Drop 中不起作用

Bootstrap jQuery Tabs are not working in Dropdown

本文关键字：不起作用 Drop jQuery Tabs Bootstrap      更新时间：2023-09-26

$('.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，我正在尝试开发我希望在dropdown-menu外单击时关闭dropdown-menu的代码，我成功了，但是当我插入nav-tabs时dropdown-menu选项卡不起作用时，我遇到了问题。

这是小提琴链接 https://jsfiddle.net/zeasts/gz15c52a/

提前致谢

紫薇

您在单击 li 时停止传播事件，这会导致选项卡的选择中断。由于需要停止事件传播以避免关闭下拉列表，因此必须手动选择选项卡。您可以通过以下代码实现此目的。

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

相关文章：