Bootstrap 4多级折叠选项卡异常：多个选项卡同时激活问题

嘿，我看了你这个Bootstrap 4多级折叠选项卡的问题，多个选项卡同时激活的情况主要是因为几个小细节没处理对，咱们来一步步搞定它：

问题根源 #

• 你的自定义样式里有个笔误：display: lock;应该是display: block;，虽然不直接影响激活状态，但会导致布局异常
• 折叠触发按钮的href="#"是无效的，Bootstrap折叠组件需要通过href或data-target精准关联对应的折叠面板ID
• 自定义的.active类没有和Bootstrap折叠组件的状态联动，导致点击后旧的激活状态不会自动移除

修复后的完整代码 #

修正后的CSS

li.nav-item {
  display: block;
  width: 100%;
  position: relative;
  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.nav-link {
  display: block;
  padding: 0 15px; /* 增加点击区域，提升交互体验 */
  color: inherit;
  text-decoration: none;
  transition: background-color 0.2s; /* 加个过渡动画，更丝滑 */
}
/* 利用Bootstrap折叠的.show类联动激活状态，父选项卡随子面板展开自动高亮 */
li.nav-item:has(.collapse.show) > a.nav-link,
a.nav-link.active {
  background-color: red;
}

修正后的HTML

<!-- 采用Bootstrap官方的.nav flex-column结构，确保组件逻辑正常 -->
<ul class="nav flex-column">
  <li class="nav-item">
    <!-- href直接指向对应折叠面板ID，同时保留data-toggle触发折叠 -->
    <a class="nav-link" data-toggle="collapse" href="#collapseOne" aria-expanded="false" aria-controls="collapseOne">
      1 - 折叠组1
    </a>
    <div class="collapse" id="collapseOne">
      <!-- 子选项卡增加缩进，视觉上区分层级 -->
      <ul class="nav flex-column ml-3">
        <li class="nav-item">
          <a class="nav-link" data-toggle="collapse" href="#collapseSub1" aria-expanded="false" aria-controls="collapseSub1">
            1.1 - 子选项1
          </a>
          <div class="collapse" id="collapseSub1">
            <p>这里是子选项1的内容区域</p>
          </div>
        </li>
        <li class="nav-item">
          <a class="nav-link" data-toggle="collapse" href="#collapseSub2" aria-expanded="false" aria-controls="collapseSub2">
            1.2 - 子选项2
          </a>
          <div class="collapse" id="collapseSub2">
            <p>这里是子选项2的内容区域</p>
          </div>
        </li>
      </ul>
    </div>
  </li>
  <li class="nav-item">
    <a class="nav-link" data-toggle="collapse" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
      2 - 折叠组2
    </a>
    <div class="collapse" id="collapseTwo">
      <p>折叠组2的内容区域</p>
    </div>
  </li>
</ul>

额外兼容方案（针对旧浏览器） #

如果你的项目需要兼容不支持:has()选择器的旧浏览器（比如IE），可以用JavaScript监听Bootstrap的折叠事件，手动控制激活状态：

// 监听折叠展开事件，给对应选项卡加active类
$('.collapse').on('show.bs.collapse', function () {
  $(this).closest('.nav-item').find('a.nav-link').addClass('active');
})
// 监听折叠收起事件，移除对应选项卡的active类
.on('hide.bs.collapse', function () {
  $(this).closest('.nav-item').find('a.nav-link').removeClass('active');
});

注意事项 #

别忘了引入Bootstrap 4的必要资源：

• Bootstrap 4 CSS文件
• jQuery（Bootstrap 4依赖jQuery）
• Bootstrap 4 JS文件

内容的提问来源于stack exchange，提问作者Alberto