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>

但是我遇到一个奇怪的问题，似乎选项卡中的每个下拉项只能选择一次。这意味着如果我导航到另一个选项卡，我将无法再次选择它。我进一步调查了这个问题，似乎一旦我从下拉列表中选择了一个项目，它就会被选中＆＃39;永远，直到我刷新页面。下面的屏幕截图显示商品和服务选项卡都已选中并处于活动状态，如果我先选择一个并切换到另一个选项卡（实际上，选择一个选项卡应该取消另一个选项卡并使其处于非活动状态）。

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

所以任何人都知道如何解决这个问题？我一直在努力，但仍无法找到方法。

Answer 1

这是Bootstrap 4的一个已知问题。开发人员已经在github上回复了它，{：3}}。

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

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

Answer 2

自Bootstrap 4 beta以来，James的回答可能需要一些更新，比如将relatedTarget更改为currentTarget或target：

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

Bootstrap 4：下拉标签项只能选择一次

2 个答案: