Bootstrap 4-下拉菜单只能通过选项卡菜单使用一次 [英] Bootstrap 4 - Dropdowns only work one times with tabs menu

问题描述

在bootstrap-4中，当我第一次单击选项卡菜单中的下拉菜单时，它可以正常工作，但此后它将停止工作.

In bootstrap-4, the first time I click a dropdown in a tab menu it works fine, but after that it stops working.

<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist">
  <li class="nav-item">
    <a class="nav-link active" href="#home" role="tab" data-toggle="tab">Home</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#profile" role="tab" data-toggle="tab">Profile</a>
  </li>
  <li class="nav-item dropdown">
    <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Dropdown</a>
    <div class="dropdown-menu">
      <a class="dropdown-item" href="#action" data-toggle="tab">action</a>
      <a class="dropdown-item" href="#action_2" data-toggle="tab">Another action</a>
    </div>
  </li>

</ul>

<!-- Tab panes -->
<div class="tab-content">
  <div role="tabpanel" class="tab-pane active" id="home">
    HOME
  </div>
  <div role="tabpanel" class="tab-pane" id="profile">
    PROFILE
  </div>
  <div role="tabpanel" class="tab-pane" id="action">
    ACTION 1
  </div>
  <div role="tabpanel" class="tab-pane" id="action_2">
    ACTION 2
  </div>
</div>

这是Bootply中的演示

推荐答案

此问题似乎是由于在打开另一个选项卡时未清除下拉菜单中的.active类引起的，因此将其突出显示并阻止了相同的下拉菜单再次单击该项目.

The issue appears to be caused by not clearing the .active class from the dropdown item when another tab is opened, therefore leaving it highlighted and preventing the same dropdown item from being clicked again.

根据问题#17371-导航下拉标签错误中的解决方法，您可以添加以下js，直到问题解决为止:

According to the workaround in Issue #17371 - navs dropdown tab bug, you can add the following js until the issue is resolved:

$('.nav-tabs').on('shown.bs.tab', 'a', function (e) {
    if (e.relatedTarget) {
        $(e.relatedTarget).removeClass('active');
    }
})

堆栈摘要中的演示

$('.nav-tabs').on('shown.bs.tab', 'a', function (e) {
    if (e.relatedTarget) {
        $(e.relatedTarget).removeClass('active');
    }
})

<!-- 4.0.0-alpha.2 Libraries -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/css/bootstrap.min.css" >
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/js/bootstrap.min.js"></script>

<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist">
  <li class="nav-item">
    <a class="nav-link active" href="#home" role="tab" data-toggle="tab">Home</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#profile" role="tab" data-toggle="tab">Profile</a>
  </li>
  <li class="nav-item dropdown">
    <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Dropdown</a>
    <div class="dropdown-menu">
      <a class="dropdown-item" href="#action" data-toggle="tab">action</a>
      <a class="dropdown-item" href="#action_2" data-toggle="tab">Another action</a>
    </div>
  </li>

</ul>

<!-- Tab panes -->
<div class="tab-content">
  <div role="tabpanel" class="tab-pane active" id="home">
    HOME
  </div>
  <div role="tabpanel" class="tab-pane" id="profile">
    PROFILE
  </div>
  <div role="tabpanel" class="tab-pane" id="action">
    ACTION 1
  </div>
  <div role="tabpanel" class="tab-pane" id="action_2">
    ACTION 2
  </div>
</div>

这篇关于Bootstrap 4-下拉菜单只能通过选项卡菜单使用一次的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！