details 默认不是手风琴，因为每个 details 元素独立运作，点击一个不会自动关闭其他；CSS 无法跨元素监听 open 状态，纯样式方案失效；真要单开效果，JS 是唯一可靠路径。
details 和 summary 本身就能实现无 JS 手风琴效果，但“手风琴”这个词容易误导——浏览器原生不强制单开，多开才是默认行为。真要无 JS 实现“点一个开、其他关”，做不到。
为什么details默认不是手风琴？
每个 details 元素完全独立：点击 A 展开，B 和 C 不会自动收起。这不是 bug，是规范设计——它本质是“可折叠区块”，不是“手风琴组件”。CSS 无法监听同级元素的 [open] 状态，所以纯样式方案必然失败。
-
toggle事件只在当前元素上触发，没有“兄弟已开”的伪类可用 - 试图用
details:not(:first-of-type)或~选择器控制其他项，全部无效 - 哪怕加了
display: grid或flex容器，也无法跨元素联动 open 状态
summary 必须是 details 的第一个子元素
结构错一点，点击就可能失效，尤其在 Safari 和旧版 Edge 中。常见翻车点：
- 写成
<summary />自闭合标签 → 大部分浏览器直接忽略 -
summary前面有空格、注释或文本节点 → Chrome 可能不响应点击 - 把
p或div放在summary前面 → Safari 不显示箭头，且点击区域异常
正确写法只有一种：
<details><br> <summary>标题</summary><br> <p>内容</p><br></details>
立即学习“前端免费学习笔记（深入）”；
自定义箭头和样式必须绕过 ::marker 兼容性坑
summary::marker 在 Safari 15.4+ 才稳定支持，Chrome 和 Firefox 虽支持但行为不一致。生产环境别依赖它。
- 用
summary { list-style: none; }清除默认三角，比summary::marker { content: none; }更稳妥 - 自定义图标推荐用
summary::after+transform: rotate()，配合details[open] summary::after切换方向 - 给
summary加display: block，否则padding和width: 100%在某些浏览器下不生效 - 禁用焦点环别直接
outline: none，改用outline-offset: -2px或重设outline-color保无障碍
想真正“单开”，JS 是唯一可靠路径
如果业务明确要求一次只展开一个面板，就必须用 JS 监听 toggle 事件——它比 click 更健壮，支持空格键、回车键和屏幕阅读器操作。
- 给所有
details加统一 class，比如accordion-item - 在
toggle回调里，遍历所有兄弟节点，设other.open = false - 注意：事件触发时
event.target.open已是新状态，不用额外判断 - 避免在
summary里嵌套button或a，否则可能触发两次 toggle
所谓“无 JS 手风琴”，实际只是“无 JS 折叠”。真要手风琴逻辑，JS 不是可选项，是必选项。
