原生details标签默认不互斥，需监听toggle事件并用removeattribute('open')手动关闭兄弟项实现手风琴效果；多模块需按容器分组绑定，动态内容须及时补绑事件。
details标签默认不互斥，必须用JavaScript手动控制
原生 <details></details> 标签之间彼此独立，点击一个不会关闭其他已展开的项。所谓“手风琴效果”（即一次只展开一项）不是浏览器默认行为，必须监听 toggle 事件并主动调用 removeAttribute('open') 关闭兄弟节点。
常见错误是只监听 click 或试图用 CSS 控制 —— 这些都无效，因为 open 是布尔属性，且切换逻辑由 UA 控制，只能靠 JS 干预。
- 必须监听
toggle事件（不是click），它在用户交互触发展开/收起后同步触发 - 不能只对当前元素操作，要遍历所有同级
<details></details>，排除自身后逐个关闭 - 注意：
toggle事件在 Safari 中支持良好，但旧版 Safari（≤15.4）可能需加ontoggle兼容写法
用querySelectorAll + forEach实现最小闭环逻辑
最简可行方案是给所有手风琴项加统一 class（如 accordion-item），然后绑定事件。不需要框架、不需要状态管理，纯 DOM 操作即可生效。
document.querySelectorAll('.accordion-item').forEach(item => {
item.addEventListener('toggle', () => {
if (item.open) {
document.querySelectorAll('.accordion-item').forEach(other => {
if (other !== item) other.removeAttribute('open');
});
}
});
});
这段代码的关键点：
- 只在
item.open === true时才关兄弟项——避免收起时反复触发无意义操作 - 用
other !== item判断引用相等性，比用index或id更可靠 - 使用
removeAttribute('open')而非other.open = false，因为后者不触发 UI 更新（部分浏览器中）
兼容IE？别试了，details本身就不支持
<details></details> 在 IE 中完全不可用（包括 IE11），所有 polyfill 都无法完美还原语义与可访问性。如果项目必须支持 IE，应直接放弃 <details></details>，改用 <div> + ARIA 的手风琴实现（如 <code>aria-expanded、aria-controls）。
即使在现代浏览器中，也要注意：
- Chrome/Firefox/Safari 对
toggle事件的触发时机一致，但 Safari 15.4 之前需 fallback 到ontoggle属性赋值 - 屏幕阅读器依赖
<summary></summary>内容和open状态自动播报，JS 关闭时无需额外 ARIA 操作 - 不要用
display: none隐藏内容区——这会破坏可访问性和 SEO；应让<details></details>自然折叠
多个手风琴区域共存时要隔离作用域
如果页面有多个独立的手风琴模块（比如“常见问题”和“配置说明”两个区块），不能全局查 .accordion-item，否则会跨区域误关。
正确做法是按容器分组处理：
document.querySelectorAll('.faq-accordion, .config-accordion').forEach(container => {
const items = container.querySelectorAll('details');
items.forEach(item => {
item.addEventListener('toggle', () => {
if (item.open) {
items.forEach(other => {
if (other !== item) other.removeAttribute('open');
});
}
});
});
});
这里容易被忽略的是：每个容器内必须确保 items 查询结果稳定，避免动态插入新 <details></details> 后未绑定事件。如需动态加载，应在插入后立即调用绑定逻辑，而不是只在页面加载时执行一次。
