手风琴折叠面板纯CSS可用<details>或:checked+label实现，但存在Safari兼容、动画卡顿、无障碍支持弱等问题；轻量JS方案通过max-height过渡与aria属性控制，兼顾兼容性、可访问性与动效平滑。
手风琴折叠面板不用 JS 也能做，但真要兼顾可访问性、动画平滑和 Safari 兼容，光靠 <details> 不够用。
用 <details> + <summary> 快速实现（但有坑）
这是原生最省事的方案，语义正确、默认支持键盘展开/收起（Space/Enter），还自带 ARIA 状态。
常见错误现象：Firefox 不触发 <code>transition 动画；Safari 对 <code>summary::marker 样式支持弱；展开后内容高度突变，没有渐变效果。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 用
max-height+overflow: hidden配合 CSS 过渡模拟动画（<details>本身不支持 height 过渡） - 隐藏原生 marker 后手动加 icon：用
summary::-webkit-details-marker和summary::marker双写 - 必须为
<summary>添加tabindex="0"，否则部分旧版 Safari 键盘不可聚焦
纯 CSS 实现（无 JS，但依赖 :checked + label）
适合静态内容、SEO 敏感场景，原理是用隐藏的 <input type="checkbox"> 控制兄弟元素显隐。
使用场景：文档 FAQ、产品特性列表——内容不常动态增删，且不需要嵌套折叠。
容易踩的坑：
-
label必须紧邻input，否则for/id关联在部分 Android WebView 中失效 - 无法用
height: auto做过渡，得预估最大高度设max-height，否则动画卡顿或截断 - 无障碍支持弱：需手动加
aria-expanded和aria-controls，且状态切换不自动同步
示例关键结构：
<input id="faq1" type="checkbox" class="accordion-toggle"> <label for="faq1" aria-expanded="false" aria-controls="faq1-content">Q: ...</label> <div id="faq1-content" class="accordion-content">A: ...</div>
轻量 JS 方案（兼容性好 + 可控性强）
核心就三件事：绑定点击、切 aria-expanded、控制 max-height 或 hidden 属性。不依赖框架，50 行内搞定。
为什么这样做：
-
max-height过渡比height更可靠（避免auto → 200px的计算失败） - 用
getComputedStyle(el).height获取真实高度再设max-height，比硬编码更健壮 - 多个面板同时展开？加个
data-accordion-group属性，JS 里用querySelectorAll找同组其他项并收起
性能注意点：频繁展开/收起时，避免在事件中反复调用 offsetHeight——缓存初始高度值更稳。
React/Vue 中封装成组件的要点
别直接把 DOM 操作逻辑塞进组件，重点在状态管理和副作用解耦。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- Vue：用
v-show控制显隐，配合<transition>+max-height动画；ref拿到内容容器后，首次展开时用clientHeight计算目标高度 - React：避免在
useEffect里读取 DOM 高度后立刻 setState 触发重绘；改用useLayoutEffect+requestAnimationFrame防抖 - 都必须透传
id、aria-labelledby、aria-hidden，否则屏幕阅读器会丢失上下文
复杂点往往不在折叠逻辑本身，而在多语言环境下的 icon 朝向、RTL 布局翻转、以及服务端渲染（SSR）时 JS 还没加载导致首屏全部展开——这些细节漏掉一个，可访问性就掉档。
