Bootstrap 5 默认不支持二级折叠菜单，需手动监听点击事件并用 Collapse 构造函数分别控制一级、二级 collapse 实例，确保父子独立开关且 DOM 结构正确嵌套。
Bootstrap 5 默认不支持二级折叠菜单，得自己补逻辑
bootstrap 5 移除了 jquery 依赖，也删掉了 collapse 组件对嵌套子菜单的自动处理。你用官方文档里的 accordion 或单层 collapse，点一级菜单时二级项根本不会联动收起——这不是你写错了，是它本来就不支持。
必须手动监听点击、控制多个 collapse 实例的状态，且要避免父子折叠互相干扰。
- 别直接给
.collapse加data-bs-parent到外层容器：那会让所有同级折叠互斥，但二级菜单需要“父开、子可独立开关” - 一级菜单的
href或data-bs-target只能指向自身对应的子菜单（如#menu-users），不能指向包含二级项的大容器 - 二级菜单项本身也要是独立的
collapse，不能塞进父级collapse里——否则父级收起时会连带干掉子级状态
用原生 JS 控制二级折叠的最小可行方案
不引入额外库，靠 Bootstrap 5 的 Collapse 构造函数 + 事件委托就能搞定。关键是区分点击目标是一级标题还是二级条目，并分别触发对应折叠实例。
document.addEventListener('click', function (e) {
const parentToggle = e.target.closest('[data-bs-toggle="collapse"][data-bs-level="1"]');
const childToggle = e.target.closest('[data-bs-toggle="collapse"][data-bs-level="2"]');
<p>if (parentToggle) {
e.preventDefault();
const targetId = parentToggle.getAttribute('data-bs-target') || parentToggle.href;
const parentCollapse = new bootstrap.Collapse(document.querySelector(targetId), {
toggle: true
});</p><pre class="brush:php;toolbar:false;">// 关闭同级其他一级菜单的子菜单（可选）
document.querySelectorAll('.sidebar-submenu.collapse.show:not(' + targetId + ')').forEach(el => {
bootstrap.Collapse.getInstance(el)?.hide();
});}
if (childToggle) { e.preventDefault(); const targetId = childToggle.getAttribute('data-bs-target') || childToggle.href; new bootstrap.Collapse(document.querySelector(targetId), { toggle: true }); } });
- 给一级菜单项加
data-bs-level="1"，二级菜单项加data-bs-level="2"，方便事件区分 - 每个二级条目（如“用户列表”“用户权限”）都配一个独立
<div class="collapse">，不要共用同一个 <code>id -
bootstrap.Collapse.getInstance(el)?.hide()是安全调用，避免重复初始化报错
HTML 结构必须满足的嵌套规则
结构松散或层级错位会导致 data-bs-target 找不到目标，或者折叠动画错乱。以下是最简但有效的 DOM 形态：
<ul class="nav flex-column">
<li class="nav-item">
<a href="#menu-users" class="nav-link" data-bs-toggle="collapse" data-bs-level="1">用户管理</a>
<div class="collapse" id="menu-users">
<ul class="nav flex-column ms-3">
<li class="nav-item">
<a href="#sub-users-list" class="nav-link" data-bs-toggle="collapse" data-bs-level="2">用户列表</a>
<div class="collapse" id="sub-users-list">
<ul class="nav flex-column">
<li class="nav-item"><a href="/users/all" class="nav-link">全部用户</a></li>
</ul>
</div>
</li>
</ul>
</div>
</li>
</ul>- 一级
collapse（如#menu-users）只包二级菜单项（<a></a>标签），不包三级内容；三级内容放在二级collapse（如#sub-users-list）里 - 所有
data-bs-target值必须是合法 CSS ID 选择器，且对应元素在 DOM 中存在 - 别用
<button></button>替代<a></a>做触发器——某些版本 Bootstrap 对button的href解析不一致
移动端展开后无法滚动？检查 overflow 和高度限制
侧边栏在小屏下常设为 position: fixed，一旦子菜单展开，内容高度超过视口，就会出现“点开了却看不到下面选项”的问题。这不是折叠逻辑失效，而是 CSS 截断了溢出内容。
- 确保侧边栏容器有
overflow-y: auto，且高度设为calc(100vh - Xpx)（X 是 header 高度） - 别给
.collapse设固定max-height：Bootstrap 5 的 collapse 动画依赖height: auto和transition，硬设会卡住动画或导致高度计算错误 - 如果用了
transform: translateX(-100%)做侧滑菜单，记得在展开时临时移除该 transform，否则折叠内容会被移出视口
二级折叠真正难的不是写几行 JS，而是让每次点击都准确命中目标 collapse 实例、不误触兄弟节点、不破坏移动端滚动体验。DOM 结构和事件委托边界稍一模糊，就容易出现“点了没反应”或“一开全开”的情况。动手前先用 console.log 确认 e.target 和 document.querySelector 返回值是否符合预期，比盲目调样式更省时间。
