原生 details+summary 是最轻量、语义正确且无障碍友好的手风琴方案，现代浏览器直接支持；多个 details 默认互不干扰，单选需 JS 监听 toggle 事件并手动关闭其他面板。
用 details 和 summary 最快实现原生手风琴
不用 JS、不引库，现代浏览器（Chrome 12+、Firefox 49+、Safari 6.1+）直接支持。这是最轻量、语义正确、无障碍友好的方案。
核心是利用 details 的默认折叠行为和 summary 的点击展开逻辑：
<details> <summary>标题内容</summary> <p>面板内任意 HTML 内容，段落、列表、代码块都行</p> </details>
-
details默认收起，open属性可设为初始展开 -
summary前会自动渲染小三角（CSS 可覆盖），点击即切换状态 - 不支持 IE，Edge 79+ 才开始支持；若需兼容旧版 Edge 或 IE，必须换方案
- 多个
details并列天然互不干扰，无需额外控制“只开一个”逻辑
想让多个面板单选（手风琴互斥）就得加 JS
原生 details 没有“关闭其他”的机制，要模拟传统手风琴效果，得监听 toggle 事件并手动干预。
关键点不是“展开这个”，而是“关掉所有其他的”：
立即学习“前端免费学习笔记（深入）”；
document.querySelectorAll('details').forEach(panel => {
panel.addEventListener('toggle', () => {
if (panel.open) {
document.querySelectorAll('details:not(:hover)').forEach(other => {
if (other !== panel) other.open = false;
});
}
});
});- 注意用
toggle事件而非click：用户用键盘空格/回车触发时也能捕获 -
details:not(:hover)是防误关——鼠标还在当前面板上时，先不关它，避免快速悬停导致闪烁 - 如果页面有大量面板，频繁遍历
querySelectorAll会有性能负担，建议缓存节点列表
用 CSS 覆盖默认样式时别漏掉 ::marker
Chrome/Firefox 默认在 summary 前加三角符号，Safari 还多一个下划线。想统一外观，得同时处理两处：
summary {
list-style: none; /* 清除部分浏览器的默认 marker */
}
summary::marker {
content: "▸ "; /* 自定义展开符号 */
color: #666;
}
details[open] > summary::marker {
content: "▼ ";
}- 仅靠
list-style: none在 Safari 下可能无效，::marker才是标准解法 -
details[open]伪类比监听 JS 状态更可靠，CSS 控制视觉反馈更及时 - 避免用
summary::before模拟符号——它和原生::marker行为不一致，键盘聚焦时可能错位
React/Vue 项目里别手写 details 的受控逻辑
在 React 中强行用 useState 控制 details.open，容易和原生行为冲突：比如用户右键“另存为”时，JS 状态没同步；或服务端渲染（SSR）时首屏闪动。
- 优先用非受控模式：
<details open={isOpen} onToggle={handleToggle}>，让 DOM 自己管理状态，JS 只响应 - Vue 3 的
v-model不支持details，得用v-bind+@toggle组合 - 若真需要强受控（如表单联动），建议改用
div+aria-expanded+ 手动 JS 切换，语义和可访问性需自行补全
真正麻烦的不是写几行代码，而是决定要不要放弃原生能力去迁就老浏览器——一旦加了 JS 驱动的折叠逻辑，就得同步维护状态、键盘导航、屏幕阅读器提示、SSR 一致性。多数场景下，直用 details 就够了。
