details的open属性只需写open（不带等号、值或引号）即可默认展开；javascript应通过el.open = true/false或toggleattribute('open')控制，避免setattribute；监听状态变化须用toggle事件，css响应需用details[open]选择器。
details的open属性怎么写才默认展开
直接写 open，不带等号、不带引号、不带任何值——这是唯一正确写法。
-
<details open></details>→ 默认展开（✅） -
<details></details>→ 默认收起（✅） -
<details open="false"></details>、<details open=""></details>、<details open="0"></details>→ 全部强制展开（❌常见翻车点）
浏览器把 open 当作布尔属性，只检测“有没有这个单词”，不解析等号右边的内容。哪怕你写了 false，只要属性名存在，就等于“开了”。
JavaScript动态控制open状态为什么不能用setAttribute
因为 setAttribute('open', 'false') 实际是往 HTML 中写入一个属性，导致“属性存在”，反而触发展开。
- ✅ 正确：直接赋值
el.open = true或el.open = false - ✅ 更推荐：用
el.toggleAttribute('open')，语义清晰且同步 DOM 与 HTML 属性 - ❌ 错误：用
el.setAttribute('open', 'false')→ 展开 - ❌ 错误：用
el.hasAttribute('open')判断当前是否展开 → 它查的是原始 HTML，不是实时状态
el.open 是反射属性，读写都对应渲染状态；而 hasAttribute 只反映初始源码，两者不同步。
监听details展开/收起变化该用什么事件
只能用 toggle 事件。它在状态变更后立即触发，此时 el.open 已是最新的布尔值。
- ✅ 正确：
el.addEventListener('toggle', () => console.log(el.open)) - ❌ 错误：
change事件根本不会触发 - ❌ 错误：给
<summary></summary>绑click→ 会干扰键盘操作（Enter/Space）和屏幕阅读器
注意：toggle 在首次加载时不会触发，只在用户交互或 JS 修改状态后派发。
CSS怎么响应open状态变化
必须用属性选择器 details[open]，它能响应 DOM 层面的 open 布尔值变化，零延迟、原生支持。
- ✅ 正确：
details[open] .content { max-height: 200px; } - ✅ 正确：
details:not([open]) summary::after { content: "▼"; } - ❌ 错误：
details[open="false"]→ 浏览器不解析值，无效 - ❌ 错误：靠 JS 手动加 class 控制样式 → 破坏语义、可访问性，且无法响应原生切换
真正容易被忽略的是：JS 改了 el.open，CSS details[open] 能立刻响应，但 hasAttribute('open') 还是 false——脚本和样式走的是两条不同的状态路径。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
