要让多个 <details> 同时展开，需显式设置每个的 open 属性；默认行为允许多开，并非单例限制。
details标签默认不支持多开，怎么让多个面板同时展开？
原生 <details> 标签默认是“单例行为”：浏览器只允许一个 <details> 处于 open 状态，除非你显式设置每个的 open 属性。这不是 bug，是规范行为——<details> 本身没内置互斥逻辑，但多数 UI 场景下开发者误以为它像手风琴一样自动收起其他项，结果发现点开第二个，第一个没关，于是手动加 JS 控制。
真正要实现“点击一个、收起其他”，得靠 JS 主动管理 open 属性：
- 监听所有
<details>的toggle事件（不是click，因为键盘空格也能触发） - 遍历同级兄弟
<details>，对非当前项调用element.removeAttribute('open') - 注意：不要用
element.open = false，这会触发二次toggle，导致状态错乱
summary里放按钮或链接，为什么点击没反应？
<summary> 是可聚焦、可交互的，但它内部的 <button> 或 <a> 默认会冒泡并触发 <details> 的展开/折叠，干扰业务逻辑。比如你在 <summary> 里放一个删除图标按钮，一点就先把面板展开了，再执行删除。
解决方法只有两个：
立即学习“前端免费学习笔记（深入）”；
- 给按钮加
event.stopPropagation()，阻止事件冒泡到<details> - 把按钮移出
<summary>，放在<details>内部但<summary>外侧（例如用 flex 布局视觉上靠右对齐）
别试图用 pointer-events: none 或 disabled，前者会让按钮不可点击，后者不适用于 <a>。
IE 和旧版 Safari 不支持 details，怎么安全降级？
<details> 在 IE 中完全不识别，在 Safari ≤12.1 里有渲染 bug（比如 summary 不显示箭头、open 属性无效）。不能只靠 CSS fallback，得用 JS 检测并补全行为。
检测方式很简单：
if (!('open' in document.createElement('details'))) {
// 加载 polyfill 或手动模拟
}
推荐轻量方案：
- 用
classList.toggle('is-open')模拟 open 状态 - 配合
max-height+transition实现动画（注意：原生<details>无动画，这是额外增强） - 避免用
display: none切换，会导致屏幕阅读器读不到内容
用 CSS 控制箭头样式，为什么 ::marker 有时不生效？
Chrome/Firefox 支持 details::marker，但 Safari 直到 15.4 才开始支持，且仅限部分属性（content、color），transform 或 font-size 无效。更稳妥的方式是隐藏原生箭头，用 <summary> 里的伪元素替代：
details > summary {
list-style: none;
}
details > summary::before {
content: "▶";
margin-right: 8px;
transition: transform 0.2s;
}
details[open] > summary::before {
transform: rotate(90deg);
}
注意两点：
- 必须用
details > summary而非summary，否则会影响页面中所有 summary -
::marker在部分安卓 WebView 中行为不一致，伪元素方案兼容性更稳
细节容易被忽略：如果用了 flex 布局在 <summary> 上，::before 可能被挤到行尾，需要加 white-space: nowrap 锁定位置。
