优先用 details/summary 实现手风琴，现代浏览器原生支持、语义化、无需 js；兼容旧环境时用 aria-expanded + hidden + js 控制，并确保 aria-controls 与 id 严格匹配。
用 details 和 summary 最快实现手风琴，但要注意兼容性
现代浏览器（Chrome 12+、Firefox 49+、Safari 6.1+、Edge 79+）原生支持 details 元素，它天生就是手风琴语义化方案。不用写 JS，不依赖 CSS 动画库，开箱即用。
常见错误是直接套用却忽略折叠状态无法默认展开、点击区域不响应、或在旧版 Safari 中完全不渲染。关键点在于：
-
details默认收起，加open属性可默认展开：<details open><summary>标题</summary>内容</details> -
summary点击会自动切换open状态，但不能用display: none隐藏它，否则交互失效 - IE 和部分安卓 WebView（如微信内置浏览器 8.0 以下）不支持，需降级处理（见下一条）
需要兼容 IE 或微信老版本？用 aria-expanded + classList.toggle 手动控制
当必须支持 IE11 或微信内置浏览器（X5 内核 v3.7 及更早），details 会被忽略，此时得回归 JS 控制显隐 + ARIA 语义。
核心不是“怎么动画”，而是“怎么保持可访问性”：屏幕阅读器依赖 aria-expanded 判断当前状态，而不是 class 名或 height 值。
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- HTML 结构保持语义：
<button aria-expanded="false" aria-controls="panel-1">标题</button><div id="panel-1" hidden>内容</div> - JS 只做三件事：切换
aria-expanded值、切换hidden属性、触发focus到内容区（方便键盘用户） - 避免用
display: none控制显隐——它会让屏幕阅读器彻底跳过内容；hidden属性才是正确选择
想加展开/收起动画？别直接 animate height，用 max-height 或 transform
直接对 height 从 0 → auto 加 transition 会失败，因为 auto 无法参与 CSS 过渡计算。
稳妥做法有两种，选哪个取决于内容高度是否固定或可预估：
- 用
max-height：设一个足够大的值（如max-height: 500px），再 transition 它；缺点是内容超长时动画会卡顿或截断 - 用
transform: scaleY()+overflow: hidden：初始transform: scaleY(0)，展开时设为scaleY(1)；性能好，但内容内若有 fixed 定位元素会错位 - 真正动态高度且要平滑？只能 JS 测高 +
getComputedStyle+requestAnimationFrame，但多数项目没必要
多个手风琴项共存时，注意 aria-controls 和 id 必须严格一一对应
这是最常被忽略的可访问性硬伤。如果页面有 3 个手风琴，每个 button[aria-controls] 的值，必须和对应 div[id] 完全一致，大小写、连字符、空格都不能错。
否则屏幕阅读器读到“点击展开”，却不知道展开哪块内容，等于白搭 ARIA。
- 错误示例：
aria-controls="panel1"对应id="panel-1"→ 不匹配 - 正确写法：
<button aria-controls="faq-1">…</button><div id="faq-1">…</div> - 批量生成时建议用模板字符串或数据属性自动生成，避免手写出错
details，只在明确需要兼容旧环境时才上 JS 方案；动画不是刚需，可访问性才是手风琴组件真正的分水岭。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
