HTML5原生details/summary元素可实现语义化、无障碍手风琴菜单，无需JS即可支持展开/收起、键盘导航与屏幕阅读器识别；现代浏览器均兼容，通过CSS重置样式并添加动画可提升体验，多开需求需JS配合ARIA属性实现。
HTML5 静态网页实现手风琴折叠菜单，不需要框架或构建工具，纯 HTML + CSS + 少量 JS 就能完成。关键在于用 details 和 summary 元素——这是 HTML5 原生支持的、语义化且无障碍友好的方案，比手写 click + classList.toggle 更轻量、更可靠。
用 details / summary 实现原生手风琴
这是最简路径，无需 JS，浏览器原生支持展开/收起、键盘导航（空格/回车触发）、屏幕阅读器识别。所有现代浏览器（Chrome 12+、Firefox 49+、Safari 6+、Edge 79+）都已支持。
-
details是容器，open属性控制默认展开状态 -
summary必须是details的第一个子元素，作为标题栏 - 内容直接写在
summary后面，会被自动折叠/展开 - 不支持多开（即默认单开），如需多开，需额外加 JS 或改用其他方案
常见问题
这里是折叠内容，可以放任意 HTML，比如列表、图片、链接……
CSS 自定义样式避免“浏览器默认丑”
原生 details 默认有小箭头、无间距、无过渡动画，直接用在生产环境会显得简陋。必须重置 summary 的默认样式，并手动添加图标和动画。
- 用
list-style: none去掉默认箭头 - 用
::marker伪元素控制箭头（仅部分浏览器支持），更稳妥是用::before加 Font Awesome 或 SVG - 为
details[open] summary::after设置旋转动画，配合transition -
details > *选择器可精准选中非summary的内容区域，方便统一设置 padding/margin
details summary {
list-style: none;
padding: 12px 20px;
background: #f8f9fa;
border: 1px solid #e2e8f0;
cursor: pointer;
}
details summary::after {
content: "+";
float: right;
transition: transform 0.2s;
}
details[open] summary::after {
transform: rotate(45deg);
}
details > *:not(summary) {
padding: 0 20px 16px;
animation: fade-in 0.25s ease-out;
}
@keyframes fade-in {
from { opacity: 0; transform: translateY(-5px); }
to { opacity: 1; transform: translateY(0); }
}
需要多开？用 JS 模拟手风琴逻辑
如果设计要求多个面板同时展开（即非互斥），就不能依赖原生 details 的单开行为，得用 div + aria-expanded + 手动切换。此时重点不是功能，而是可访问性补全。
- 每个标题用
button而非div，确保键盘可聚焦、空格/回车可触发 - 绑定
click事件，切换目标div的hidden属性或max-height+overflow - 动态更新
aria-expanded和aria-controls属性，否则屏幕阅读器无法感知状态 - 避免用
display: none控制显隐——它会让内容完全脱离可访问树，应优先用hidden或visibility: hidden
内容…
移动端适配与容易忽略的细节
静态页常被手机直接打开，但很多手风琴实现会在小屏上出问题：点击区域太小、动画卡顿、触摸反馈缺失。这些不是“锦上添花”，而是影响真实可用性的硬伤。
- 给
summary或button设置最小高度（min-height: 44px），符合 iOS 触摸目标建议尺寸 - 禁用
user-select: none，否则长按可能误触发复制菜单 - 用
transform: scaleY()替代height动画，避免重排，更顺滑 - 测试 Safari iOS —— 它对
details的open属性监听有延迟，如有 JS 监听toggle事件，需加setTimeout微调 - 不要在
details内嵌 iframe 或第三方 widget，它们可能拦截 click 事件导致无法收起
真正难的不是写出能动的菜单，而是让每次点击都有明确反馈、每种设备都能自然操作、每个残障用户都能线性理解结构。原生 details 已经帮你扛了大半——别为了“看起来更酷”而绕开它。
