怎么用Bootstrap制作折叠树形菜单-Bootstrap教程-PHP中文网

Bootstrap本身不提供折叠树形菜单组件，官方无TreeView或AccordionTree内置支持；常见方案为第三方插件（如bootstrap-treeview）或手写递归+accordion组合，前者省事兼容4/5版、依赖jQuery，后者轻量但需手动处理层级隔离与状态同步。

怎么用bootstrap制作折叠树形菜单

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-icons CSS，并确保 href 字段存在才能生成可点击链接（否则只渲染文字）
默认不支持右键菜单、拖拽、复选框；要加这些功能得看插件文档是否开放 onNodeSelected 等回调

纯 Bootstrap 5 + 原生 accordion 模拟树结构

适合轻量场景、不想引入 jQuery、且树最多 2–3 层。关键在用 data-bs-parent 隔离每层折叠组，避免父子联动：

VPS Bootstrap

从零启动全新 VPS，完成 OpenClaw 完整部署，包括备份/恢复及恢复后验证。用于 OpenClaw 部署。

下载

<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 —— 它不支持异步加载后自动刷新状态