应使用配合构建语义化树形菜单，子组用，严格同步aria-expanded、tabindex与焦点管理，禁用details/summary，懒加载时用aria-busy保障可访问性。
用 ul/li + role="tree" 明确语义结构
HTML 本身没有 tree 元素，但 WAI-ARIA 规范要求：树形菜单必须声明 role="tree"，每个可操作节点必须带 role="treeitem"，否则屏幕阅读器无法识别为“可折叠的层级控件”。只靠嵌套 ul/li 不够——它只是普通列表，不是交互式树。
常见错误是把 role="tree" 加在 div 上，或漏掉 role="treeitem"。正确做法是：
- 最外层容器用
<ul role="tree"></ul>（不是div） - 每个可展开的
<li>加role="treeitem"和aria-expanded="false" - 叶子节点也要加
role="treeitem"，但不设aria-expanded - 子
ul加role="group"，表示该组属于上层节点
必须同步 aria-expanded、tabindex 和焦点管理
仅切换 CSS class 或 max-height 不足以满足可访问性。用户用键盘操作时，需要明确知道哪个节点处于焦点、是否可展开、当前状态是什么。
关键动作必须成对发生：
- 点击/回车展开节点 → 同时设置
button.setAttribute('aria-expanded', 'true')和ul.setAttribute('aria-hidden', 'false') - 折叠时反向设置，且要把焦点移回触发按钮（
btn.focus()），否则键盘用户会“掉出”菜单 - 所有可操作节点（如 toggle 按钮）需有
tabindex="0"；非激活态的子节点应设tabindex="-1"，避免 Tab 键误入深层 - 监听
keydown处理方向键：ArrowRight展开、ArrowLeft折叠、ArrowDown/ArrowUp移动焦点
避免 details/summary —— 它不满足树形菜单的 ARIA 要求
<details></details> 看似省事，但它天生不支持 role="tree" 和 role="treeitem"，也无法可靠设置 aria-level、aria-setsize、aria-posinset 这些描述层级位置的关键属性。
更实际的问题包括：
- Safari 对嵌套
<details></details>的open状态重置不可控，JS 读取el.open在 SSR 渲染后常为false，导致状态错乱 -
<summary></summary>无法添加role="treeitem"（会覆盖原生语义），屏幕阅读器播报为“摘要”，而非“菜单项” - 不支持键盘方向键导航，
ArrowLeft无法折叠父级，Tab会跳过整个子树 - 服务端渲染初始状态与客户端 JS 同步困难，容易出现闪动或状态不一致
懒加载节点要预留占位并正确声明 aria-busy
大型树菜单首次加载全量 DOM 会导致卡顿，但懒加载不能牺牲可访问性。当子节点尚未加载时，不能让屏幕阅读器认为“该节点无子项”，也不能让键盘焦点直接穿透过去。
正确处理方式：
- 空子
ul保留，但加aria-busy="true"和aria-hidden="true" - toggle 按钮上加
aria-expanded="pending"（非标准值，但部分读屏器能识别）或暂用aria-disabled="true" - 加载完成后，立即补全子
li并移除aria-busy，再调用button.setAttribute('aria-expanded', 'true') - 动态插入节点后，用
el.setAttribute('role', 'treeitem')补全角色，不能依赖初始 HTML
真正难的不是写展开逻辑，而是让每一个 aria- 属性的值都严格对应 DOM 状态、焦点位置和用户预期——少一个 tabindex，键盘用户就可能被困住；错一次 aria-expanded，读屏器就会报错“已展开却看不见内容”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
