Bootstrap本身不提供折叠树形菜单组件，官方无TreeView或AccordionTree内置支持；常见方案为第三方插件（如bootstrap-treeview）或手写递归+accordion组合，前者省事兼容4/5版、依赖jQuery，后者轻量但需手动处理层级隔离与状态同步。
Bootstrap 本身不提供折叠树形菜单组件
Bootstrap（包括 v5.x）官方没有 Treeview 或 AccordionTree 这类内置组件。你看到的“Bootstrap 树形菜单”，基本都是第三方插件（如 bootstrap-treeview）或手写递归 + accordion + CSS 的组合方案。直接用原生 accordion 做多层嵌套，会遇到点击子项触发父级收起、层级状态不同步、无法动态展开指定节点等问题。
用 bootstrap-treeview 实现基础折叠树
这是最省事的方案，兼容 Bootstrap 4/5，依赖 jQuery（v3.6+），核心是把数据转成符合要求的 JSON 结构传给 $().treeview()：
$('#tree').treeview({
data: [
{
text: '文档',
nodes: [
{ text: '入门指南', href: '/guide' },
{ text: 'API 参考', href: '/api', state: { expanded: true } }
]
}
],
expandIcon: 'bi bi-chevron-right',
collapseIcon: 'bi bi-chevron-down',
levels: 2
});
注意几点：
-
expandIcon/collapseIcon必须用 Bootstrap Icons 类名（v5.3+ 推荐），不能用 Font Awesome 类名混用 - 如果用 Bootstrap 5，需额外引入
bootstrap-iconsCSS，并确保href字段存在才能生成可点击链接（否则只渲染文字） - 默认不支持右键菜单、拖拽、复选框；要加这些功能得看插件文档是否开放
onNodeSelected等回调
纯 Bootstrap 5 + 原生 accordion 模拟树结构
适合轻量场景、不想引入 jQuery、且树最多 2–3 层。关键在用 data-bs-parent 隔离每层折叠组，避免父子联动：
<div class="accordion" id="tree-root">
<div class="accordion-item">
<h3 class="accordion-header">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#docs">文档</button>
</h3>
<div id="docs" class="accordion-collapse collapse" data-bs-parent="#tree-root">
<div class="accordion-body p-0">
<div class="accordion" id="docs-sub">
<div class="accordion-item">
<h3 class="accordion-header">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#guide">入门指南</button>
</h3>
<div id="guide" class="accordion-collapse collapse" data-bs-parent="#docs-sub">
<div class="accordion-body">内容...</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
要点：
- 每层子菜单必须用独立的
id（如#docs-sub）作为data-bs-parent值，否则点击子项会把整个根 accordion 收起 - 手动补
accordion-body p-0防止内层出现多余 padding 影响缩进视觉 - 无法通过 JS 直接调用
myCollapse.show()展开深层节点 —— 因为 DOM 是静态的，没封装树操作 API
动态控制展开/收起时容易忽略的细节
不管是用插件还是手写，只要涉及 JS 控制节点状态，就绕不开这几个坑：
-
bootstrap-treeview的expandNode(nodeId)要求nodeId是数字索引（从 0 开始），不是你传入 JSON 里的id字段 —— 它内部根本不读你 JSON 里的id - 用原生
Accordion实例时，bootstrap.Accordion.getInstance(el).show()只对直接子.accordion-collapse有效，对嵌套在.accordion-body里的无效 - 如果菜单数据来自 API，务必等
treeview初始化完成后再调用expandNode，否则返回undefined—— 它不支持异步加载后自动刷新状态
真正难的不是怎么画出树形，而是让「展开逻辑」和「数据状态」「用户交互反馈」三者对齐。多数人卡在第二层展开后，第一层图标没变、或者点击空白处意外收起 —— 这些都不是样式问题，是事件委托和 parent 绑定没理清。
