Bootstrap 4：下拉选项卡项只能选择一次答案

【问题标题】：Bootstrap 4: dropdown tab items can only be selected onceBootstrap 4：下拉选项卡项只能选择一次
【发布时间】：2016-01-18 16:59:02
【问题描述】：

好吧，我正在尝试使用 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

那么有人知道如何解决这个问题吗？我一直在努力，但仍然找不到方法。

【问题讨论】：

标签： html css twitter-bootstrap drop-down-menu tabs

【解决方案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');
    }
})

【讨论】：

【解决方案2】：

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

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

【讨论】：