原生 details 元素不支持 name 属性互斥，chrome/firefox/safari 的实验性支持不稳定，生产环境必须用 toggle 事件监听 + 手动控制 open 实现可靠互斥。
details互斥必须靠 JavaScript，name 属性不可信
原生 details 元素**没有 name 属性**，也不支持通过它实现互斥。你写 <details name="group"></details>，浏览器会忽略该属性，既不报错也不生效——它只是个无效的自定义属性。Chrome 117+/Firefox 119+/Safari 17.4+ 确实新增了对 name 的实验性互斥支持，但行为不稳定、兼容性差（比如 Safari 17.4 在某些嵌套场景下仍失效），生产环境不应依赖。
用 toggle 事件监听 + 手动控制 open 是唯一可靠方案
核心逻辑不是“打开当前”，而是“关闭所有兄弟，再打开当前”。toggle 事件比 click 更准确，能覆盖键盘操作（空格/回车）和屏幕阅读器交互。
关键点：
- 只在
details.open === true时执行关闭逻辑，避免收起时误触发二次遍历 - 用
data-group标识同组面板，避免影响页面其他details - 动态插入的新
details需重新绑定，或改用事件委托（监听父容器）
最小可行代码：
document.querySelectorAll('details[data-group="accordion"]').forEach(panel => {
panel.addEventListener('toggle', () => {
if (panel.open) {
document.querySelectorAll(`details[data-group="accordion"]`).forEach(d => {
if (d !== panel) d.open = false;
});
}
});
});
多个 details 并列时默认不互斥，这是设计而非 bug
每个 details 是完全独立的状态容器。open 属性只作用于自身，浏览器不会主动协调状态。你点开一个，其他保持原状；再点另一个，前一个也不会自动关闭——这和多数 UI 要求的“手风琴”效果不符，但它是规范行为。
常见误解：
-
details[open]CSS 选择器只能匹配当前已展开的节点，无法驱动联动 -
:has(details[open])目前无法跨元素控制兄弟状态（CSS:has()不支持嵌套此类逻辑） - 试图用
display: none或visibility: hidden控制子级显隐，会导致toggle事件失效、无障碍支持断裂
想加展开动画？details 本身不支持 transition
details 的展开是强制重排，不能直接对 height 或 max-height 做 CSS 过渡。若需平滑动画，得放弃原生折叠逻辑，改用 aria-expanded + max-height + transition 模拟，同时手动同步焦点与可访问性属性。
注意：
- 不能写
transition: height 0.3s，因为height: auto无法过渡 - 常用 hack 是设
max-height: 0→max-height: 500px（值需大于内容实际高度） - 每次内容变化后，需 JS 重新测量并更新
max-height，否则动画会卡顿或截断
真正互斥的手风琴，从来不是靠一个属性开关就能搞定的——它需要明确的组标识、精准的事件时机判断，以及对可访问性和动态内容的持续维护。别省那几行 JS，它才是手风琴稳住的关键。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
