details元素不支持name属性，所谓“原生互斥手风琴”无法通过name实现；必须用javascript监听toggle事件并手动控制其他details的open属性为false。
details 标签根本没有 name 属性
直接说结论：details 元素在 HTML 标准中**不支持 name 属性**，试图写 <details name="faq1"></details> 不会报错但完全无效，浏览器会忽略它。所谓“原生独占式手风琴”（即展开一个时自动收起其他）根本不能靠 name 实现——这不是遗漏，是标准就没设计这个能力。
用 JavaScript 控制多个 details 的独占行为
要实现“点开一个，其他自动关闭”，必须手动监听 toggle 事件并操作其他 details 元素的 open 属性。关键点：
-
details自带open布尔属性，设为false即收起（注意不是移除属性，而是显式设为false） - 不要用
removeAttribute('open')，这在某些浏览器里行为不一致；统一用el.open = false - 推荐给所有需要联动的
details加一个共同 class（如js-accordion），方便批量选择
简单示例：
document.querySelectorAll('.js-accordion').forEach(details => {
details.addEventListener('toggle', () => {
if (details.open) {
document.querySelectorAll('.js-accordion').forEach(other => {
if (other !== details) other.open = false;
});
}
});
});
为什么不能用 form + name + radio 模拟？
有人尝试套用 form 内 radio 的互斥逻辑，比如把 details 包进 form、加 name、再塞 input type="radio" 控制——这属于过度设计且不可靠：
-
details不是表单控件，name对它无意义 - radio 的互斥靠的是表单提交机制，和
details的展开/收起无绑定关系 - 用户点击
summary时不会触发 radio 的 change，还得额外监听、同步状态，反而更易出错
兼容性和性能注意点
details 在现代浏览器中支持良好（Chrome 12+、Firefox 49+、Safari 6.2+），但 IE 完全不支持，需 fallback；另外要注意：
- 频繁设置
open = false不会触发重排，性能无压力 - 如果页面有大量
details（比如 100+），建议用事件委托代替遍历监听，但实际场景极少遇到 - 移动端 Safari 有个已知问题：快速连续点击 summary 可能导致
toggle事件丢失一次，稳妥做法是加防抖或检查event.target.open状态而非仅依赖事件触发时机
真正麻烦的从来不是怎么写，而是忘记 details 本就不提供互斥语义——得自己补，而且得补得干净利落。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
