必须用 JavaScript 操作 open 属性才能一键控制所有 details 元素展开状态，因 HTML/CSS 无法修改 DOM 状态；应使用 el.open = true/false 而非 setAttribute，且初始状态需通过是否写 open 属性控制。
如何用 JavaScript 控制页面中所有 <details> 元素的展开状态
直接给结论：不能靠纯 HTML/CSS 实现一键展开或收起，必须用 JavaScript 操作 open 属性。浏览器原生 <details> 是独立控制的，没有全局开关。
常见错误是试图用 CSS 的 :has() 或伪类批量触发，但目前没有任何 CSS 机制能修改元素的 DOM 状态（比如设 open=true），只能影响样式。
实操建议：
- 用
document.querySelectorAll('details')获取全部<details>元素 - 对每个元素设置
element.open = true或false，而非用setAttribute—— 后者不触发渲染更新，且可能被忽略 - 避免在
DOMContentLoaded前执行，否则可能查不到元素
details 的 open 属性与布尔属性语法的区别
这是最容易踩的坑：写 <details open="false"> 并不会让元素收起，反而会强制展开 —— 因为 HTML 中只要存在 open 这个属性名（无论值是什么），浏览器就认为它是“真值”。
立即学习“前端免费学习笔记（深入）”；
所以：
- 初始状态想收起？直接不写
open属性：<details> - 初始状态想展开？只写
<details open>，不要带等号和值 - 运行时控制？必须用 JS 赋值：
el.open = false，不是el.setAttribute('open', 'false')
一键展开/收起按钮的最小可行实现
不需要框架，几行原生 JS 就够。关键是把按钮逻辑和状态同步做干净，避免“点一下没反应”或“点两次才生效”。
示例代码（可直接贴进 <script>）：
const detailsList = document.querySelectorAll('details');
const toggleBtn = document.getElementById('toggle-details');
toggleBtn.addEventListener('click', () => {
const allOpen = [...detailsList].every(el => el.open);
detailsList.forEach(el => el.open = !allOpen);
toggleBtn.textContent = allOpen ? '全部展开' : '全部收起';
});
说明：
-
[...detailsList].every(el => el.open)判断是否全部已展开，比用计数更可靠（尤其有动态增删时） - 按钮文字随状态切换，避免用户误判当前操作效果
- 不依赖任何外部库，兼容 Chrome/Firefox/Safari（
<details>在 Edge 79+ 也支持）
移动端点击穿透与 focus 状态干扰问题
在 iOS Safari 或部分安卓 WebView 中，快速连点按钮后，某个 <details> 可能意外获得焦点，导致滚动偏移、键盘弹出（如果里面有 <input>），甚至后续点击失效。
解决方法很简单：
- 给按钮加
type="button"，防止表单默认行为干扰 - 在事件处理末尾加
toggleBtn.focus()，把焦点主动拉回按钮，避免焦点留在某个<summary>上 - 如果
<details>内含可聚焦元素（如链接、输入框），考虑在批量操作时临时tabindex="-1"，操作完再恢复
细节往往藏在交互链路里：比如用户刚点开一个 <details>，马上又点“全部收起”，此时那个刚打开的元素可能还处于 active 状态，影响视觉反馈。这类问题没法靠一次赋值解决，得结合事件节奏和 focus 管理。
