最简树形菜单应使用 ul+li 嵌套实现，子菜单作为下级 ul 放在对应 li 内；父级 li 包含触发 button 和子 ul，通过 class 控制显隐并同步 aria-expanded 属性，确保无障碍与 seo 友好。
直接用 ul + li 嵌套是最可靠、最语义化、也最容易维护的方案；其他方式（比如纯 div 堆叠或硬套 details）在复杂层级下会迅速失控，尤其在需要键盘导航、SEO 或状态同步时。
为什么不能跳过 ul/li 直接用 div 或 details？
浏览器和辅助技术（如屏幕阅读器）依赖 HTML 的语义结构来理解“这是一个可展开的树形菜单”。div 没有层级含义，details 虽原生支持折叠，但嵌套超过两层后：
- 二级 details 必须写在一级 summary 内容中，HTML 结构极易错乱
- 无法统一控制展开/收起（比如“全部展开”按钮）
- aria-expanded 状态需手动同步，否则键盘用户按方向键时焦点丢失
- 搜索引擎无法识别其为导航结构，影响 SEO
ul/li 嵌套必须遵守的 DOM 位置规则
子菜单不是“跟在父项后面”，而是必须作为子元素嵌入父 li 内部：
常见错误包括：
- 把 ul 提到同级位置（破坏语义嵌套）
- 用 JS 动态 appendChild 到错误容器（如追加到 body 或父 ul）
- 忘记给每个 li 加 role="treeitem"，导致屏幕阅读器跳过该节点
如何让 ul/li 树真正支持键盘操作？
仅结构正确还不够，得补全 ARIA 状态与事件逻辑：
- 用
tabindex="-1"控制焦点流：只允许按钮或链接获得焦点，子ul不参与 Tab 导航 - 监听
ArrowDown/ArrowUp在同级节点间移动；ArrowRight展开已折叠节点，ArrowLeft收起或跳回父级 - 每次展开时，动态设置：
button.setAttribute('aria-expanded', 'true')和subMenu.setAttribute('aria-hidden', 'false') - 避免用
display: none隐藏子菜单——这会让屏幕阅读器直接忽略内容；改用aria-hidden="true"+ CSSvisibility: hidden或height: 0
复杂树的关键不在“怎么画出来”，而在“怎么让结构不散、状态不错、焦点不丢”。哪怕数据来自 JSON，也要先转成合规的 ul 嵌套结构，再补 ARIA 和键盘逻辑——跳过这步，后期调试成本会指数级上升。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
