details元素无name属性，仅支持全局属性和open布尔属性；实现手风琴效果须用JavaScript配合data-group控制互斥展开，注意Safari旧版toggle事件兼容性问题。
details 元素根本没有 name 属性 —— 这是常见误解的根源。HTML 标准中，details 只支持全局属性（如 open、class）和 open 这个布尔属性，不支持 name，也不原生支持互斥折叠（手风琴效果）。
要实现手风琴效果，必须靠 JavaScript 控制多个 details 的 open 状态，不能依赖不存在的 name 属性联动。
为什么 details 没有 name 属性？
HTML 规范从未给 details 定义 name。它和 input、form 等表单元素不同，不参与表单提交，也没有分组机制。试图写 <details name="accordion"> 不会报错，但该属性纯粹是自定义属性（即 data-name），浏览器完全忽略它对折叠行为的影响。
用 JavaScript 实现真正互斥的手风琴（无第三方库）
核心逻辑：点击一个 details 时，关闭所有其他同组的 details，再切换当前项。推荐用 data-group 来标记逻辑分组（比虚构的 name 更规范、可读性更强）：
立即学习“前端免费学习笔记（深入）”；
<details data-group="faq"> <summary>Q1：怎么重置密码？</summary> A1：点击登录页的“忘记密码”链接。 </details> <details data-group="faq"> <summary>Q2：支持哪些支付方式？</summary> A2：支付宝、微信、银联云闪付。 </details>
对应脚本（放在 </body> 前或使用 DOMContentLoaded）：
document.querySelectorAll('details[data-group]').forEach(details => {
details.addEventListener('toggle', () => {
if (details.open) {
const group = details.dataset.group;
document.querySelectorAll(`details[data-group="${group}"]`).forEach(d => {
if (d !== details) d.open = false;
});
}
});
});- 监听
toggle事件而非click，能兼容键盘操作（空格/回车触发）和屏幕阅读器 - 只在
details.open === true时才关闭兄弟项，避免重复点击同一项导致全部关闭 - 用
dataset.group读取分组标识，语义清晰且符合标准
注意 Safari 的 toggle 事件兼容性陷阱
Safari 直到 v15.4 才完整支持 toggle 事件（旧版可能不触发或触发两次）。若需支持更老 Safari：
- 降级方案：监听
click并手动检查details.open状态变化 - 或者改用
transitionend+getComputedStyle判断高度变化（复杂且不推荐） - 更稳妥的做法是加一层防抖：
if (details.open && !wasOpen) { /* 关闭其他 */ }，其中wasOpen缓存上一次状态
别用 CSS-only 方案假装“互斥”
有人尝试用 :has() 或相邻兄弟选择器（details ~ details）配合 open 状态做样式控制，但这只能影响视觉（比如隐藏内容），无法真正关闭其他 details 的 open 属性 —— 用户仍可通过 JS 或 DevTools 手动设为 true，且无障碍体验（AT）会读出所有展开内容。真正的互斥必须由 JS 驱动 DOM 状态。
实际项目中，最容易被忽略的是 toggle 事件在 Safari 旧版本中的不可靠性，以及误把 name 当作标准属性去依赖 —— 这两者叠加，会让手风琴在部分设备上完全失效。
