html - Bootstrap 4 tabs multi-level tablist with collapse 不能正常工作；多个选项卡同时处于事件状态

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 实现带有可折叠子菜单的多级选项卡列表菜单。我需要同时使用选项卡和折叠。我已经实现了使功能(右 Pane 出现和消失单击右链接)正常工作但同时有多个选项卡与事件类。我想知道是否有一种方法可以仅使用 bootstrap 4 类而不添加更多 js/jquery 代码使其正常工作。

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

Answer 1

问题是在同一父级别上组合选项卡和折叠。目前，1&2 切换选项卡和 3&4 切换选项卡折叠。你需要让它们全部折叠起来，里面有标签(就像折叠 1 和 2 一样)，或者让它们都在 #Menu 内折叠 collapse 项。

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

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

https://codeply.com/go/Aq4zWAcUkX