zeasts

Question

＆＃13;

<resources>

    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
        <!-- Customize your theme here. -->
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>

        <item name="android:actionBarSize">415dp</item>
        <item name="actionBarSize">415dp</item>
    </style>

    <style name="AppTheme.NoActionBar">
        <item name="windowActionBar">false</item>
        <item name="windowNoTitle">true</item>
    </style>

    <style name="AppTheme.AppBarOverlay" parent="ThemeOverlay.AppCompat.Dark.ActionBar" />

    <style name="AppTheme.PopupOverlay" parent="ThemeOverlay.AppCompat.Light" />

    <style name="MineCustomTabText" parent="TextAppearance.Design.Tab">
        <item name="android:textSize">16sp</item>
    </style>

</resources>

＆＃13;

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

＆＃13;

Hai，我正在尝试开发代码，当我在<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">  <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关闭，我成功了但是这里我插入{时出现问题{1}} dropdown-menu中的标签不起作用。

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

提前致谢

zeasts

Answer 1

您在点击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')
 });
});

更新了代码段

＆＃13;

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

＆＃13;

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

＆＃13;

Bootstrap jQuery选项卡在Dropdown中不起作用

zeasts

1 个答案: