details+summary可实现无JS语义化树形菜单，支持键盘和屏幕阅读器，但IE不支持；需用JS实现搜索联动和状态同步，并严格保持DOM、open属性与aria-expanded/aria-hidden一致。
用 details + summary 快速实现语义化树形菜单
不需要 JS 就能做基础展开收起，而且天然支持键盘操作和屏幕阅读器。但注意：IE 完全不支持，Edge 14+、Chrome 12+、Firefox 49+ 才可用。
结构非常直接：details 包裹子节点（可以是另一个 details），summary 作为触发标题：
<details>
<summary>一级菜单</summary>
<p>普通内容</p>
<details>
<summary>二级菜单</summary>
<p>子项内容</p>
</details>
</details>
默认是收起状态；点击 summary 自动切换 open 属性。CSS 可通过 details[open] > summary::after 添加箭头图标。
常见坑：summary 里不能放 button 或 a 等可交互元素（会干扰默认行为）；若需点击跳转，得用 JS 拦截并手动控制 open 属性。
立即学习“前端免费学习笔记（深入）”；
用 CSS 控制展开动画时为什么 max-height 过渡不生效
因为 details 的 open 切换是布尔属性变化，不是 CSS 类切换，所以无法直接对 max-height 做 transition —— 浏览器不会对 auto 或无明确数值的 max-height 动画。
解决办法只有两个：
- 放弃原生
details，改用 JS 控制类名（如.is-open），再配合max-height: 0→max-height: 300px过渡（需预估最大高度） - 改用
transform: scaleY()+overflow: hidden，过渡更可靠，且无需预设高度
示例片段（JS 驱动）：
.tree-item > .children {
overflow: hidden;
transform: scaleY(0);
transform-origin: top;
transition: transform 0.2s ease-in-out;
}
.tree-item.is-open > .children {
transform: scaleY(1);
}
用 JavaScript 实现可搜索 + 多级联动展开的树形菜单
当需要「输入关键词高亮匹配项，并自动展开所有父级」时，原生 details 就不够用了，必须用 JS 管理状态。
关键逻辑在于递归遍历和状态同步：
- 每个节点应有唯一
id和parent_id字段（或用嵌套数组结构） - 搜索命中子节点后，向上回溯设置所有祖先节点的
expanded = true - DOM 渲染时，根据当前节点的
expanded状态决定是否显示子列表 - 避免重复绑定事件：用事件委托监听所有
.tree-toggle元素，再用closest('[data-node-id]')定位目标节点
性能提示：深层嵌套（>5 层）+ 节点数 >200 时，建议加 requestIdleCallback 分批渲染，否则卡顿明显。
为什么用 aria-expanded 和 aria-hidden 不能只靠 JS 补充
光在 JS 里写 el.setAttribute('aria-expanded', 'true') 不够——如果子菜单 DOM 是懒加载的（比如点击后才 fetch 渲染），那么初始时刻 aria-expanded="true" 却没有对应子内容，会被读屏器报“不一致”错误。
正确做法是：
- 只在子内容真实挂载到 DOM 后，再设置
aria-expanded="true" - 收起时先移除子 DOM，再设
aria-expanded="false" -
aria-hidden应作用于整个子容器（<ul class="children">），而不是单个<li>
漏掉这点，残障用户可能听到“已展开”，却无法访问任何子项，或者反复读出已被隐藏的内容。
复杂点往往不在展开动效，而在状态与 DOM、语义属性三者的严格同步。稍有脱节，就从“可用”退化成“不可访问”。
