Question

  li.nav-item {  display: block;  width: 100%;  position: relative;  display: lock;  min-height: 40px;  line-height: 2.4;  padding: 0;  color: #f0f0f0;  font-weight: 600;  font-size: 16px;  border-bottom: 1px solid #092a3b;  background: #233d4a;  margin: 0;
}

a {
  display:block;
}

a.active {
  background-color:red;
}

<ul>
<li class="nav-item">
            <a class="" data-toggle="collapse" href="#" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">1</a>

            <div id="collapseOne" class="collapse" data-parent="#Menu">
                <ul class="nav nav-tabs" role="tablist">
                    <li class="nav-item" data-parent="#collapseOne">
                        <a class="" data-toggle="tab" href="#One1">1.1</a>
                    </li>
                    <li class="nav-item" data-parent="#collapseOne">
                        <a class="" data-toggle="tab" href="#One2">1.2</a>
                    </li>
                    <li class="nav-item" data-parent="#collapseOne">
                        <a class="" data-toggle="tab" href="#One3">1.3</a>
                    </li>
                </ul>
            </div>
        </li>

        <li class="nav-item">
            <a class="" data-toggle="collapse" href="#"  data-target="#collapseTwo" aria-expanded="true" aria-controls="collapseTwo">2</a>

            <div id="collapseTwo" class="collapse" data-parent="#Menu">
                <ul class="nav nav-tabs" role="tablist">
                    <li class="nav-item">
                        <a class="" data-toggle="tab" href="#Two1">2.1</a>
                    </li>
                    <li class="nav-item">
                        <a class="" data-toggle="tab" href="#Two2">2.2</a>
                    </li>
                    <li class="nav-item">
                        <a class="" data-toggle="tab" href="#Two3">2.3</a>
                    </li>
                </ul>
            </div>
        </li>

        <li class="nav-item">
            <a class="" data-toggle="tab" href="#Three">3</a>
        </li>

        <li class="nav-item">
            <a class="" data-toggle="tab" href="#Four">4</a>
        </li>
    </ul>

我正在努力使用Bootstrap 4实现带有可折叠子菜单的多级tablist菜单。我需要同时使用标签和折叠。我已经实现了功能（右侧窗格显示和消失，单击右侧链接）正常工作但同时有多个选项卡与活动类。我想知道是否有一种方法可以使它正常工作只需使用bootstrap 4类而不添加更多js / jquery代码。

这是我的代码： https://codepen.io/AlbertoAguado/pen/XqdmbK

Answer 1

问题是在同一父级别上合并标签和折叠。目前，1＆amp; 2切换标签和3＆amp; 4切换折叠。你需要让它们全部崩溃，里面有标签（就像折叠1和2一样），或者在collapse内创建所有#Menu个项目。

此外，当隐藏其中一个折叠元素时，您需要隐藏任何显示的标签。

$('.collapse').on('hide.bs.collapse', function () {
  $('.tab-content .show').removeClass('show');
})

https://www.codeply.com/go/Aq4zWAcUkX

Bootstrap 4选项卡多级tablist崩溃无法正常工作;多个标签同时处于活动状态

1 个答案: