details 默认展开需写 open 属性不带值，写 open="false" 反而强制展开；js 应操作 el.open 布尔属性而非 setattribute；css 用 details[open] 选择器响应状态；监听 toggle 事件获取实时状态。
open 是布尔属性，存在即展开、不存在即收起；写 open="false" 不会收起，反而强制展开——这是最常翻车的点。
HTML 中怎么让 details 默认展开或收起
只靠写法，不依赖 JS：
-
<details open><summary>标题</summary>内容</details>→ 页面加载即展开（open后面不跟等号、不跟值） -
<details><summary>标题</summary>内容</details>→ 默认收起（完全不写open） -
<details open="false"></details>、<details open=""></details>、<details open="0"></details>全部等效于展开——浏览器只检测属性是否存在，不解析值
JavaScript 动态控制 open 状态的正确写法
必须操作 DOM 属性 el.open，而不是 HTML 属性：
- ✅ 正确：
el.open = true、el.open = false、console.log(el.open) - ❌ 错误：
el.setAttribute('open', 'false')→ 实际写入属性，触发“存在即展开” - ✅ 推荐切换：
el.toggleAttribute('open')，语义清晰且同步 DOM 与 HTML 属性 - ⚠️ 注意：
el.hasAttribute('open')查的是 HTML 源码，和el.open不同步；初始没写时两者都为false，但执行el.open = true后，hasAttribute仍返回false
CSS 怎么响应展开/收起状态
只能用属性选择器 details[open]，它响应 DOM 属性变化（包括 JS 修改），不是 class 或伪类：
- ✅ 正确：
details[open] .content { max-height: 200px; } - ✅ 正确：
details:not([open]) summary::after { content: "▶"; } - ❌ 错误：
details[open="false"]→ 浏览器根本不解析属性值 - ❌ 错误：
details.open→open不是 class，没有这个类名 - ⚠️ 注意：原生箭头要用
summary::marker { content: "" }隐藏，list-style: none无效
监听展开/收起变化只能用 toggle 事件
details 没有 change 事件，click 不可靠：
- ✅ 正确：
el.addEventListener('toggle', () => console.log(el.open))—— 用户点击、键盘操作（Space/Enter）、JS 修改el.open都会触发，且el.open已是最新的布尔值 - ❌ 错误：
el.addEventListener('change', ...)→ 根本不会触发 - ❌ 错误：给
<summary></summary>绑click→ 无法捕获 JS 控制场景，且干扰屏幕阅读器和键盘导航 - ⚠️ 注意：首次页面加载不触发
toggle，只在状态变更后派发；别在回调里再写el.open = !el.open，会无限循环
真正容易被忽略的是：el.open 和 hasAttribute('open') 走的是两条路径，一个反映渲染状态，一个查源码；CSS 的 details[open] 跟前者同步，但脚本里混用就会出错。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
