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"></details> 不会报错，但该属性纯粹是自定义属性（即 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>
对应脚本（放在
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
