原生 details 实现手风琴无需 js，但仅支持单开、默认收起（需 open 属性）、样式受限（三角图标难重置、无 height 过渡）；需多开、动效或无障碍时，必须用 button+div+aria+js 管理状态与动画。
用 details + summary 实现原生手风琴，但要注意默认展开和样式限制
现代浏览器（Chrome 12+、Firefox 49+、Safari 6.1+）原生支持手风琴交互，无需 JS 就能完成基础折叠。但details 默认是收起状态，要默认展开需加 open 属性：
<details open><summary>标题</summary>内容</details>。它不支持多开（每次只允许一个
details 展开），除非你主动移除其他元素的 open 属性——这反而要写 JS，失去“原生无 JS”的优势。样式上，summary 的三角图标无法用 CSS 完全重置（Safari 下 list-style: none 无效），且不能直接控制过渡动画（height 无法 transition）。适合快速原型或对动效无要求的后台管理页。
用 aria-expanded + aria-controls 实现可访问的手风琴，必须配合 JS 控制状态
当需要键盘导航（Tab / Enter / Space）、屏幕阅读器支持，或要求多面板独立开关时，必须放弃 details，改用 button + div 结构，并严格维护 ARIA 属性。关键点：
-
button上设aria-expanded="true/false"和aria-controls="panel-id" - 对应面板
div设id="panel-id"和aria-hidden="true/false" - 点击按钮时，JS 必须同步更新这两组属性，否则辅助技术会读错状态
- 不要仅靠 CSS 类名（如
.is-open）判断状态——屏幕阅读器看不到类名
用 CSS max-height 过渡实现平滑展开动画，但高度必须预估或用 JS 测量
CSS 动画最常用方案是给面板设置 max-height 并 transition，因为 height: auto 无法过渡。常见错误是硬写死一个大值（如 max-height: 500px），结果内容超长时被截断，或内容很短时动画拖沓。稳妥做法有两种：
- 用 JS 在展开前读取
scrollHeight，再设为max-height值，收起时设回0 - 用 CSS 自定义属性 +
calc()配合 JS 注入精确像素值（避免内联 style 影响可维护性）
overflow: hidden 必须始终存在，否则内容可能在动画中途溢出；若面板含 margin 或 padding，需额外处理，否则动画结束时布局会跳变。
React 中用 useState 管理手风琴状态，但别在渲染中直接调用 setState
函数组件里通常用 const [openIds, setOpenIds] = useState(new Set()) 存多个展开项 ID（支持多开），或用 const [activeId, setActiveId] = useState(null)（单开）。容易踩的坑：
- 在
useEffect里监听openIds变化后又立刻setOpenIds，造成无限循环 - 把
setOpenIds写在 render 函数体里（非事件回调中），导致每次渲染都触发状态更新 - 用
Array.includes()判断是否展开，但没做浅比较，ID 类型不一致（字符串 vs 数字）导致误判
setOpenIds(prev => new Set(prev).toggle(id))（需自行实现 toggle），或用 new Set([...prev]).has(id) 判断。
手风琴看似简单，真正上线时最常翻车的不是逻辑，而是 ARIA 同步时机、CSS 过渡边界条件、以及 React 中状态更新的隐式依赖——这些地方一漏，用户要么看不见内容，要么动画卡住，要么键盘无法操作。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
