手风琴面板核心是details+summary元素，现代浏览器原生支持展开/收起，语义正确、可访问性好；details默认收起，summary为唯一触发子元素且须为首个子节点；open属性控制状态，css自定义图标需用summary::before并清除list-style，多面板互斥需js监听toggle事件。
手风琴面板的核心是 details + summary 元素
现代浏览器原生支持手风琴交互，不需要 JS 就能实现基础展开/收起，语义正确、可访问性好、代码极简。Chrome 12+、Firefox 49+、Safari 15.4+ 均已稳定支持。
关键点：details 默认收起，summary 是唯一可点击触发切换的子元素，且必须是第一个子节点。
<details><summary>标题内容</summary><p>折叠区正文，可以是任意 HTML 内容</p> </details>
-
details[open]属性表示当前展开状态，JS 可通过element.open = true控制 - 不要在
summary外再套点击事件——会破坏键盘导航（如空格/回车触发）和屏幕阅读器行为 - 若需默认展开，直接加
open属性：<details open></details>
用 CSS 覆盖默认样式时注意 summary::marker 和伪元素限制
浏览器给 summary 自动添加一个三角形标记（marker），但它的样式控制能力有限：仅支持 content、color、font 相关属性，不支持 transform 或 background。
常见需求如“右箭头旋转”或“自定义图标”，得绕过 marker，改用 summary::before：
summary {
list-style: none; /* 隐藏原生 marker */
padding-left: 24px;
position: relative;
}
summary::before {
content: "▶";
position: absolute;
left: 0;
transition: transform 0.2s;
}
details[open] summary::before {
transform: rotate(90deg);
}
- 务必加
list-style: none，否则 marker 和自定义图标会重叠 -
summary::after不生效——规范只允许::marker和::before（部分浏览器支持::after，但不可靠） - 动画要用
transform，别用width或height——details的内容区域高度由内部流式内容决定，无法直接动画
需要多面板互斥（单开一栏）就得用 JS 监听 toggle 事件
details 默认各自独立，没有原生“手风琴模式”。要实现点击一个展开时自动收起其他，必须监听 toggle 事件并手动操作兄弟节点。
document.querySelectorAll('details').forEach(panel => {
panel.addEventListener('toggle', () => {
if (panel.open) {
document.querySelectorAll('details:not(:hover)')
.forEach(other => other !== panel && (other.open = false));
}
});
});
- 别用
click事件——它无法捕获键盘触发（如回车键），而toggle是专门为此设计的 - 排除
:hover是为了防止鼠标快速划过时误关闭正在悬停的其他面板 - 如果页面有大量面板，建议加节流或用事件委托，避免重复绑定
IE 和旧版 Safari 下必须降级为 JS 实现
details 在 IE 完全不支持，Safari 15.3 及更早版本存在 bug（如 toggle 事件不触发、open 属性读写异常）。检测方式很简单：
if (!('open' in document.createElement('details'))) {
// 启用 JS 版本：用 div + aria-expanded + 手动切换 class
}
- 降级方案里，
aria-expanded和aria-controls必须同步更新，否则屏幕阅读器无法识别状态 - 别只靠 CSS
max-height动画模拟展开——内容高度不确定时容易错位，推荐用height: auto配合scrollHeightJS 计算 - 移动端双击缩放问题常被忽略：确保容器有
touch-action: manipulation，避免 Safari 误判为缩放手势
细节都在 DOM 结构和事件响应链里，不是加个 class 就完事。真正麻烦的是可访问性补全和跨浏览器状态同步，而不是视觉动效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
