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> </details><details name="faq"><summary>问题二</summary><p>答案二</p><div class="aritcle_card flexRow artxards"> <div class="artcardd flexRow"> <a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill10246" title="HTML Text Extract"><img src="https://img.php.cn/upload/skill/001/246/273/6adaf20dee630206.jpg" alt="HTML Text Extract" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a> <div class="aritcle_card_info flexColumn"> <a rel="nofollow" href="/xiazai/skill10246" title="HTML Text Extract" class="overflowclass">HTML Text Extract</a> <p class="overflowclass">从HTML页面（URL、文件或标准输入）中提取主体内容文本，去除导航、页脚、广告和模板文本。可直接传递给readability_check或其他文本工具。</p> </div> <a rel="nofollow" href="/xiazai/skill10246" title="HTML Text Extract" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div> </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 的细节。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
