details元素没有name属性，它不支持name属性实现互斥；互斥需通过JavaScript监听toggle事件并手动控制open状态来实现。
details元素根本不支持name属性
直接告诉你结论：details 是原生 HTML 元素，它**没有 name 属性**，规范里也从未定义过。你写 <details name="group1">，浏览器会忽略这个 name，既不会触发互斥行为，也不会报错——它只是个无效的自定义属性。
为什么想用name实现互斥？常见误解来源
很多人是从 <input type="radio"> 的逻辑迁移过来的：同名 name 让单选框互斥。但 details 没有这种机制，它的展开/收起完全独立，靠的是自身 open 属性和用户点击 summary 触发。
- 原生
details之间**不存在任何内置的组管理逻辑** -
name不是可枚举属性，document.querySelectorAll("[name='xxx']")虽能选中，但无法驱动行为 - 试图靠 CSS 或纯 HTML 实现“点击一个、其他关闭”，必须手动控制
open属性
真正可行的互斥手风琴：用 JavaScript 控制 open 属性
要实现点击一个 details 时关闭同组其他项，核心是监听 toggle 事件，遍历同组元素并重置 open 状态。示例场景：一组 class 为 accordion-item 的 details：
<details class="accordion-item"> <summary>标题1</summary> <p>内容1</p> </details> <details class="accordion-item"> <summary>标题2</summary> <p>内容2</p> </details>
对应脚本：
立即学习“前端免费学习笔记（深入）”；
document.querySelectorAll('.accordion-item').forEach(item => {
item.addEventListener('toggle', () => {
if (item.open) {
// 关闭所有兄弟项（排除自己）
document.querySelectorAll('.accordion-item').forEach(other => {
if (other !== item) other.open = false;
});
}
});
});
- 必须监听
toggle事件，而不是click—— 因为details的展开/收起可能由键盘（空格/回车）触发 - 只在
item.open === true时执行关闭逻辑，避免收起时反复操作 - 不要用
details[open]选择器做初始状态清理，CSS 伪类details[open] + details无法实现互斥
注意：细节影响体验
原生 details 的互斥不是开箱即用的功能，容易忽略的点包括：
- 如果页面动态插入新
details，需重新绑定事件或使用事件委托 - 屏幕阅读器对
details的 ARIA 支持依赖于正确结构，手动控制open不影响语义，但别删掉summary - 移动端 Safari 对
toggle事件的支持稳定，但旧版 Android WebView 可能需要 polyfill 或降级处理 - 不建议给多个
details设置相同id或滥用name，这违反 HTML 唯一性约束，且无实际作用
真要省事，就老实用 aria-expanded + aria-controls 手动维护，或者引入轻量库如 details-element-polyfill 做兼容增强——但别指望 name 能起作用。
