details标签默认单开，需用js监听summary点击事件并手动设置details.open属性来实现多开或单开；注意preventdefault防聚焦干扰，避免toggleattribute触发默认行为。
details标签默认行为不支持多开，得用JS干预
原生 <details></details> 标签默认是「单开」的：点开一个，其他自动收起。手风琴菜单通常需要「点击展开当前、保持其他状态不变」，这和浏览器默认逻辑冲突，必须用 JS 拦截默认行为或改用受控模式。
关键不是“怎么让 details 展开”，而是“怎么阻止它自动关闭别的”。最稳妥的做法是不用 open 属性做切换，改用 JS 手动控制每个 <details></details> 的 open 状态，且不依赖 toggle 事件的默认冒泡行为。
- 不要给多个
<details></details>直接加open属性——浏览器会强制只留一个打开 - 所有展开/收起操作必须通过 JS 设置
element.open = true/false - 监听
<summary></summary>的click事件，而不是<details></details>的toggle事件（后者在用户手动点击时已触发，不好拦截）
用 JS 绑定 summary 点击并手动控制 open 状态
每个 <summary></summary> 都要绑定 click，拿到父级 <details></details>，再翻转它的 open 属性。注意别用 toggleAttribute('open')，那会触发浏览器默认逻辑；直接赋值最可靠。
document.querySelectorAll('details summary').forEach(summary => {
summary.addEventListener('click', (e) => {
e.preventDefault(); // 防止 summary 默认聚焦行为干扰
const details = summary.parentElement;
details.open = !details.open;
});
});
-
e.preventDefault()主要避免点击后<summary></summary>被意外聚焦（尤其在 Safari 中可能引发滚动） - 不用
details.toggleAttribute('open')，因为某些浏览器下它仍会联动关闭其他<details></details> - 如果想实现「单开」（即点一个关其他），就在翻转前遍历所有同级
<details></details>，把非目标项设为open = false
兼容性要注意：Safari 对 details 的 focus 行为较特殊
Safari 会自动给被点击的 <summary></summary> 加 :focus，有时导致样式跳变或意外滚动到顶部。这不是 bug，但会影响手风琴体验。
- 加 CSS 重置：
summary:focus { outline: none; }，再补上可访问性等效样式（比如box-shadow） - 如果页面有
<main></main>或容器设置了scroll-behavior: smooth，Safari 可能因 focus 触发平滑滚动，建议对summary单独禁用：summary { scroll-margin-top: 0; } - 旧版 Safari（的
open属性动画，但 JS 控制状态本身是兼容的
想加过渡动画？只能靠 max-height + overflow，不能直接 transition open
open 属性本身无法被 CSS 过渡，浏览器不把它当作可动画属性。真要加展开收起动画，得用 max-height + overflow 模拟，同时保持 <details></details> 的语义结构。
- 给
<details></details>加overflow: hidden和transition: max-height 0.3s ease - 初始状态设
max-height: 0，展开时设为足够大的值（如max-height: 500px） - JS 中切换的是 class（如
is-open），而不是直接操作open属性——此时<details></details>的语义功能退化为容器，需额外用aria-expanded补全可访问性 - 纯
<details></details>+ JS 控制是最轻量方案；加动画就得在语义和动效之间做取舍
open；选后者就得自己接管高度和 ARIA。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
