details标签原生不支持互斥切换，需用name属性（Chrome 117+/Firefox 119+/Safari 17.4+）或JS监听toggle事件实现手风琴效果，旧浏览器需降级处理。
details 标签本身不支持多项互斥切换——它默认就是各自独立的。所谓“手风琴效果”（即点开一个、其他自动收起），必须靠 JS 或浏览器对 name 属性的隐式支持，不能指望原生行为自动实现。
为什么直接写多个 details 不会互斥？
每个 details 是完全独立的状态容器，open 属性只作用于自身。浏览器不会主动协调多个 details 的展开状态，哪怕它们结构相同、CSS 类一样。这是设计使然，不是 bug。
- 你点击 A 展开，B 仍保持原状；再点 B，A 不会自动关闭
-
details[open]选择器只能读取当前已展开的节点，无法触发联动 - 用 CSS
:has()也做不到跨元素状态控制（目前不支持嵌套:has(details[open])这类逻辑）
用 name 属性实现免 JS 互斥（现代浏览器可用）
这是最轻量、语义最干净的方案，但依赖较新浏览器：Chrome 117+、Firefox 119+、Edge 117+、Safari 17.4+ 已支持。核心是给所有 details 设相同的 name 值：
<details name="faq">
<summary>问题一</summary>
<p>答案一</p><p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p><div class="aritcle_card flexRow">
<div class="artcardd flexRow">
<a class="aritcle_card_img" href="/xiazai/skill9263" title="Html2md"><img
src="https://img.php.cn/upload/skill/000/000/081/179249945220127.jpg" alt="Html2md" ></a>
<div class="aritcle_card_info flexColumn">
<a href="/xiazai/skill9263" title="Html2md">Html2md</a>
<p>使用 Readability + Turndown 将 HTML 页面转换为干净的、Agent 友好的 Markdown。去除导航栏、广告、页脚、Cookie 横幅、社交按钮等干扰元素。支持 URL...</p>
</div>
<a href="/xiazai/skill9263" title="Html2md" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a>
</div>
</div>
</details>
<details name="faq">
<summary>问题二</summary>
<p>答案二</p>
</details>
- 只要
name值一致，浏览器会自动保证同一时间仅一个details为open - 无需监听事件、无需手动赋值
open = false，也不用担心键盘操作遗漏 - 不支持该特性的旧浏览器（如 Safari 16 或更早）会退化为多开模式，需做降级判断
用 JS 监听 toggle 事件做兼容性兜底
当需要支持 Safari 15.4–17.3 或部分 Linux 版 Chrome 时，必须用 JS。关键不是监听 click，而是 toggle——它在用户用鼠标、空格键、回车键触发状态变化时都会触发：
document.querySelectorAll('details').forEach(d => {
d.addEventListener('toggle', () => {
if (d.open) {
document.querySelectorAll('details').forEach(other => {
if (other !== d) other.open = false;
});
}
});
});
- 只在
d.open === true时执行关闭逻辑，避免收起动作误触发二次关闭 - 不要用
toggleAttribute('open')，直接赋值other.open = false，Safari 15 有已知兼容问题 - 若页面动态插入新
details（如通过innerHTML或框架渲染），需重新运行这段绑定，或改用事件委托（但toggle不冒泡，委托不可行，只能重绑）
别踩这些样式坑
summary 的渲染行为在各浏览器差异明显，不统一处理就会出现箭头错位、文字加粗、点击热区变小等问题：
- 清除默认箭头：
summary::marker { content: ''; }（Safari 15.4+ 才稳定支持，旧版得用list-style: none+ 背景图） - 强制块级显示：
summary { display: block; }，否则 Firefox 下可能 inline 导致 padding 失效 - 禁用默认下划线：
summary { text-decoration: none; }，尤其当你把a或button套在summary里时 - 不要给
details设height或min-height，会影响展开动画的自然高度计算
真正难的不是让它们动起来，而是让它们在 Safari 15、Firefox ESR、Edge Legacy 这些环境里表现一致——name 方案省事但有兼容断层，JS 方案可控但得自己扛住事件生命周期和动态 DOM 的细节。
