Bootstrap 4：下拉选项卡项只能选择一次 [英] Bootstrap 4: dropdown tab items can only be selected once

问题描述

好吧，我正在尝试使用引导程序4构建选项卡系统，并且由于有超过5个选项卡（总共7个），我决定使用一个下拉选项卡将最后3个选项卡作为下拉项放置到第五个标签（作为父标签）。代码如下所示：

Well I am trying to build a tab system with bootstrap 4, and since there are more than 5 tabs(a total of 7), I decide to use a dropdown tab to put the last 3 tabs as dropdown items to the fifth tab(as parent tab). The code looks like below:

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

但是我遇到一个奇怪的问题，似乎只能选择选项卡中的每个下拉项一旦。这意味着，如果我导航到另一个选项卡，将无法再次选择它。我对此问题进行了进一步调查，似乎从下拉列表中选择了一个项目后，该项目将一直保持选定状态，直到刷新页面为止。下面的屏幕截图显示，如果我先选择一个然后切换到另一个，则商品和服务选项卡都处于选中状态并且处于活动状态（实际上，选择一个选项卡应该取消另一个选项卡并使它处于非活动状态）。

However I am encountering a strange issue, it seems that each dropdown item in the tab can only be selected once. This means that if I navigate to another tab, I wont be able to select it again. I investigated the issue further, and it seems that once I select an item from the dropdown list, it stays 'selected' forever until I refresh the page. The below screenshot shows that both goods and services tabs are selected and active, if I select one first and switch to another(while in reality, selecting one tab should cancel the other tab and make it inactive).

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

所以有人知道如何解决此问题？我一直在尽力而为，但仍然找不到办法。

So anyone know how to fix this issue? I've been trying my best but still cant find a way.

推荐答案

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

This is a known issue with Bootstrap 4. The developer has responded to it on github, here: https://github.com/twbs/bootstrap/issues/17371.

建议的解决方法是从显示的事件中删除活动类。我有类似的问题，此修复程序对我有用。

The recommended workaround is to remove the active class from the shown event. I had similar issues, and this fix worked for me.

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

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