details/summary 原生支持语义化折叠，需用 max-height + overflow + transition 实现平滑动画，配合 class 控制图标旋转，避免直接操作 style 或 display。
用 details + summary 实现语义化折叠，无需 JS 就能过渡
现代浏览器（Chrome 12+、Firefox 49+、Safari 6+、Edge 79+）原生支持 details/summary，它自带展开/收起逻辑、键盘导航（空格/回车触发）、屏幕阅读器识别，比手写 JS 更轻量可靠。
但注意：原生不带动画，得靠 CSS 补上 max-height 过渡。不能直接对 details 设 height: 0，会压垮内部流式内容；正确做法是控制其后继内容：
-
details > *:not(summary)或details[open] summary ~ *选中折叠区域 - 初始设
max-height: 0; overflow: hidden; - 加
transition: max-height 0.3s ease-in-out; -
details[open] summary ~ *中设足够大的max-height（如300px），别用none或auto——它们无法过渡
max-height 过渡比 display 或 height 更稳妥
想用 CSS 动画实现折叠，display: none 完全不可过渡，height 对 auto 值无效，而 max-height 是目前最通用、兼容性最好的方案。
常见踩坑点：
立即学习“前端免费学习笔记（深入）”；
- 设
max-height: 0后，内容被截断？检查是否漏了overflow: hidden - 展开后高度“抖动”或“跳变”？说明预设的
max-height值不够大，内容撑出边界；可估算最大行数 × 行高，或用 JS 动态测高（但静态页建议手动设保守值，如500px） - 在 Safari 上动画卡顿？加
will-change: max-height提前提示渲染优化 - 别给
details或summary直接加transition，它不作用于开闭状态本身，只对后续内容生效
图标旋转动画必须用 class 切换，不能靠内联 style
点击时箭头从 ▼ 变成 ▲，靠 transform: rotate(180deg) 实现，但直接用 JS 写 element.style.transform 会破坏过渡效果。
正确写法：
- 定义两个 class：
.icon-collapsed { transform: rotate(0); }和.icon-expanded { transform: rotate(180deg); } - 两个 class 都带
transition: transform 0.2s ease（写在基态，不是 hover） - JS 只负责切换：
iconEl.classList.toggle('icon-expanded') - 确保图标元素有明确尺寸（
display: inline-block; width: 20px; height: 20px;）和transform-origin: center - 若用 SVG，额外加
will-change: transform和backface-visibility: hidden防掉帧
移动端点击失效？换用 pointerdown 替代 click
纯 click 在手机上有约 300ms 延迟，且小按钮（details 自带 pointerdown 支持，但如果你自己绑事件（比如控制多开或互斥），就得手动处理。
关键点：
- 用
element.addEventListener('pointerdown', handler)，它统一兼容 mouse/touch/pen，无延迟 - 按钮加
role="button" tabindex="0"，保证键盘可聚焦、无障碍可用 - 避免同时监听
click和touchstart，会导致重复触发 - 如果菜单含动态内容（比如异步加载子项），折叠前先调用
getBoundingClientRect()记录当前高度再设max-height，防止动画中途重排
细节决定成败：比如 details[open] summary::after 的旋转动画，必须和 JS 切换的 class 同步；又比如 max-height 值一旦设死，内容增减就可能破动画——这些地方没有银弹，得根据实际内容高度留余量、做测试。
