html - Bootstrap 4 : dropdown tab items can only be selected once

Question

好吧，我正在尝试使用 bootstrap 4 构建一个选项卡系统，并且由于有超过 5 个选项卡(总共 7 个)，我决定使用下拉选项卡将最后 3 个选项卡作为下拉项放到第五个选项卡(作为父选项卡)。代码如下所示:

  <ul class="nav nav-tabs nav-justified">
    <li id="atab1" class="nav-item"><a href="#tab1" data-toggle="tab" class="nav-link active">Basic Info</a></li>
    <li id="atab2" class="nav-item"><a href="#tab2" data-toggle="tab" class="nav-link">Additional Info</a></li>
    <li id="atab3" class="nav-item"><a href="#tab3" data-toggle="tab"class="nav-link">Contact List</a></li>
    <li id="atab4" class="nav-item"><a href="#tab4" data-toggle="tab" class="nav-link">Posts & Comments</a></li>
    <li id="atab5" class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">More</a>
        <div class="dropdown-menu">
            <a data-toggle="tab" class="dropdown-item" href="#tab5">Goods & Products</a>
            <a data-toggle="tab" class="dropdown-item" href="#tab6">Services & Projects</a>
            <a data-toggle="tab" class="dropdown-item" href="#tab7">Jobs & Offers</a>
        </div>
    </li>
</ul>

但是我遇到了一个奇怪的问题，似乎选项卡中的每个下拉项只能选择一次。这意味着如果我导航到另一个选项卡，我将无法再次选择它。我进一步调查了这个问题，似乎一旦我从下拉列表中选择了一个元素，它就会永远保持“选中”状态，直到我刷新页面。下面的屏幕截图显示商品和服务选项卡都被选中并处于事件状态，如果我先选择一个选项卡然后切换到另一个选项卡(而实际上，选择一个选项卡应该取消另一个选项卡并使其处于非事件状态)。

http://oi59.tinypic.com/33gx.jpg

所以有人知道如何解决这个问题吗？我一直在尽我最大的努力，但仍然找不到办法。

Answer 1

这是 Bootstrap 4 的一个已知问题。开发人员已在 github 上对其进行了回复，此处:https://github.com/twbs/bootstrap/issues/17371 .

推荐的解决方法是从显示的事件中删除事件类。我有类似的问题，这个修复对我有用。

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