树形展示必须用javascript控制展开逻辑，纯html的ul/li无法实现交互式折叠；details/summary仅适用于单层简单场景；真实项目应采用轻量js+css类名驱动，并完善键盘导航与无障碍支持。
直接说结论：树形展示不是“选不选”的问题，而是“怎么构造 DOM + 怎么控制展开逻辑”的问题；用纯 HTML 无法实现交互式层级折叠，必须配合 JavaScript 控制 display 或 aria-expanded 状态。
为什么不能只靠 ul/li 实现可交互树形
很多人以为嵌套 ul 就是树形结构，但默认状态下所有子节点永远可见，没有折叠/展开能力。浏览器不会自动识别“这是目录树”，也不会响应点击收起子项——这需要显式绑定事件和切换样式。
常见错误现象：
• 页面一加载就全部展开，层级深时页面直接卡死
• 点击父节点没反应，控制台无报错但 onclick 没绑上
• 屏幕阅读器读不出当前是否展开，无障碍支持缺失
- 真正可用的树形 = 语义化 HTML（
ul/li+role="tree"） + JS 状态管理 + CSS 可见性控制 - 如果只是静态展示（如文档目录快照），用嵌套
ul足够；但凡要用户点击操作，就必须补 JS - 别在
li上直接写style="display:none"，应通过 class 切换（如is-collapsed），否则 JS 难以统一维护状态
details/summary 是最简方案，但有硬限制
原生 details 标签确实能免写 JS 实现折叠，但它不支持多级嵌套的“联动收起”——子 details 不会随父级关闭而关闭，且无法用 JS 精确控制展开状态（open 属性只读）。
使用场景：
• 单层 FAQ 折叠
• 后台配置页的临时分组面板
• 快速原型验证，不追求生产级控制力
- 嵌套
details会导致子项始终独立开关，视觉混乱 - 不支持键盘
Space/Enter触发（部分浏览器支持，但不保证） - 无法获取“当前展开项路径”，做高亮或 URL 同步时束手无策
<details><summary>一级节点</summary><details><summary>二级节点</summary><p>内容…</p> </details></details>
真实项目该用什么：轻量级 JS + CSS 类名驱动
不需要引入 Vue/React，一个 20 行左右的脚本就能支撑中等复杂度树形（5 层以内、百个节点）。关键是把状态存在 DOM 上，而非 JS 变量里，避免渲染错位。
- 给每个可折叠节点加
data-tree-id，用它作为唯一键关联展开状态 - 用
aria-expanded="true/false"同步可访问性状态，屏幕阅读器才能正确播报 - CSS 用
[aria-expanded="false"] > ul控制子树隐藏，比 JS 操控style.display更可靠 - 点击事件监听委托到根容器（
event.target.closest('[data-tree-node]')），避免为每个节点重复绑定
性能提示：超过 500 个节点时，建议懒加载子节点（首次点击再 fetch 或动态插入 DOM），而不是一次性渲染全量 HTML。
容易被忽略的细节：键盘导航与焦点管理
多数人只做了鼠标点击，但树形组件必须支持方向键（↑↓→←）和 Home/End。否则 WCAG 2.1 AA 级别不达标，政企项目会被打回。
- 用
tabindex="-1"让非输入型节点可聚焦，再用 JS 手动移动focus() - 右箭头展开当前项（若已折叠），左箭头收起（若已展开）；若不可操作则跳过
- 收起节点后，焦点应保留在父节点，而不是丢失或跳到页面顶部
- 不要依赖
outline: none去掉焦点框——改用:focus-visible精准控制
这些细节不写进 JS 就等于没做树形交互，只是个带样式的列表。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
