Bootstrap jQuery Tabs在Dropdown中不起作用 [英] 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，我正在尝试开发在单击dropdown-menu之外时希望关闭dropdown-menu的代码，我成功完成了此操作，但是当我在nav-tabs时遇到了问题c2>选项卡不起作用.

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.

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

预先感谢

推荐答案

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

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

更新的代码段

 $( 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 Tabs在Dropdown中不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！