原生details元素是实现手风琴最省事方案，自带状态、键盘可访问且样式可控；需配合aria-expanded和css类实现过渡动画，并严格保障无障碍同步。
手风琴面板用details和summary最省事
纯CSS实现手风琴，首选原生details元素——它自带展开/收起状态、键盘可访问性、无需JS监听，且样式完全可控。浏览器兼容性已覆盖Chrome 12+、Firefox 49+、Safari 6+、Edge 79+，现代项目基本无顾虑。
常见错误是强行用div + :hover或:focus模拟，结果无法键盘操作、不支持屏幕阅读器、移动端点按失效。别绕路。
实操建议：
-
details默认可展开多个，加open属性可预设初始状态（如<details open></details>） -
summary内可放任意内容（图标、文字、按钮），但避免嵌套交互元素（如button），否则焦点逻辑混乱 - 用
details[open] > summary::after控制箭头方向比JS切换class更稳定 - 收起时内容默认
display: none，若需过渡动画，得配合max-height+overflow: hidden，但原生details不触发transition，此时要换方案
需要过渡动画就得放弃details，改用aria-expanded + CSS类控制
原生details不支持高度过渡，想做平滑展开收起，必须用aria-expanded标记状态，靠CSS类（如.accordion-item--open）驱动max-height和opacity变化。
关键不是“怎么写CSS”，而是“怎么同步状态”：JS只负责切换aria-expanded和class，其余全交给CSS。否则容易出现视觉状态和ARIA状态不一致，影响无障碍体验。
实操建议：
- 初始
max-height设为0，展开时设为内容实际高度（可用scrollHeight动态读取） - 过渡只写
max-height和opacity，别碰height（不可过渡）或display（会跳变） - 每个面板的
id必须唯一，且summary的aria-controls要指向对应面板id - 移动端点击区域至少44×44px，
summary外层加padding比单纯放大字体更可靠
max-height过渡的坑：固定值 vs fit-content vs JS测量
max-height过渡卡顿、截断或闪动，90%是因为设错了目标值。CSS里没有max-height: fit-content（它无效），也不能写max-height: 100%（相对父容器，非内容自身）。
常见错误现象：max-height: 500px导致短内容空出大片空白，长内容被截断；或者用max-height: 0 → max-height: 100vh，动画拉得太长。
实操建议：
- 保守方案：用JS在展开前读取
scrollHeight，设为max-height，收起再设回0（注意重排） - 折中方案：预估最大高度（如
max-height: 300px），加overflow: hidden，确保内容不溢出 - 别用
height: auto过渡——它不生效，浏览器直接跳变 - 动画时间控制在
300ms以内，超过400ms用户会觉得迟滞
移动端点击失效？检查pointer-events和touch-action
在iOS Safari或部分安卓WebView里，手风琴点击没反应，大概率是summary或其父容器被意外设置了pointer-events: none，或外层有touch-action: pan-y阻止了默认点击行为。
另一个隐蔽原因是summary用了display: flex但子元素没撑开高度，导致点击区域实际为0，尤其在未设置min-height或line-height时。
实操建议：
- 给
summary加cursor: pointer和user-select: none，既是视觉提示，也防误选文字 - 移除所有父级的
touch-action: pan-y，除非你明确在做滚动拦截 - 用
outline: 2px solid transparent代替outline: none，保留键盘聚焦可见性 - 真机调试时打开“显示触摸区域”（Safari Web Inspector → Settings → Show element outlines），看点击是否落在有效区域
手风琴真正的复杂点不在展开动画，而在状态同步和无障碍保障。一个aria-expanded="false"写错位置，或者tabindex漏掉，对屏幕阅读器用户就是完全不可用的。别只盯着CSS动效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
