details + summary 可实现纯 css 手风琴，原生支持展开/折叠、键盘操作与屏幕阅读器，无需 js 或 aria；多开为默认行为，单选需 js；兼容现代浏览器，ie 已淘汰。
用 details + summary 实现最简手风琴
纯 CSS 手风琴不需要 JS，核心就是浏览器原生支持的 details 和 summary 元素。它们天生具备展开/折叠语义和默认交互逻辑，连 ARIA 都不用手动加。
直接写 HTML 就能跑：
<details><summary>标题内容</summary><p>这里是折叠区的内容，可以是任意 HTML</p> </details>
浏览器会自动处理点击、键盘空格/回车触发、焦点管理。iOS Safari、Chrome、Firefox、Edge 全部支持（IE 不支持，但 IE 已淘汰）。
去除默认箭头并自定义样式
所有浏览器都会在 summary 前渲染一个三角形箭头，用 CSS 可以完全接管：
- 清除默认样式：
summary::marker { content: "" }（注意：Safari 17+ 才支持::marker，旧版需用list-style: none+padding-left补齐） - 添加自定义图标：用
background-image或伪元素::before，配合details[open] summary::before控制旋转状态 - 禁用默认 outline：加
summary:focus { outline: none }，再用box-shadow或边框做可访问的焦点提示
多个手风琴项同时展开？还是单选？
原生 details 默认允许多个同时展开 —— 这是标准行为，不是 bug。如果需要「单选手风琴」（即打开一个时自动收起其他），纯 CSS 无法实现，必须用 JS 监听 toggle 事件并操作其他 details 的 open 属性。
所以得先明确需求：
- 要多开 → 直接用多个独立
details，零配置 - 要单选 → 放弃纯 CSS 方案，或接受「视觉上单选但语义上仍是多开」的折中（比如用 CSS 隐藏其他项的
summary，但会破坏可访问性）
兼容性与可访问性注意事项
details/summary 的键盘操作（Tab 进入、空格/回车切换）和屏幕阅读器支持已经很成熟，但有几点容易被忽略：
- Safari 在 macOS 上对
summary的焦点样式较弱，建议显式加summary:focus-visible { outline: 2px solid #007aff } - 不要用
display: none隐藏summary，这会让屏幕阅读器跳过整个details；要用visibility: hidden+position: absolute等不影响语义的方式 - 如果内容区域有表单控件，展开后需确保焦点能自然落入其中（原生支持，但若用了
max-height+overflow: hidden动画则可能打断）
真正难的不是怎么写，而是想清楚要不要放弃原生语义去换动画效果 —— 大多数场景下，直接用 details 更稳、更轻、更无障碍。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
