Bootstrap 4:下拉选项卡项只能选择一次

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