open是布尔属性，只检测存在与否而非值，故open="false"仍展开；js应直接操作el.open属性，监听toggle事件，css用details[open]选择器响应状态。
open 属性不是开关，它只决定页面加载那一刻的初始状态；写成 open="false" 反而强制展开——这是最常翻车的地方。
为什么 open="false" 会让 <details></details> 展开
因为 open 是布尔属性，浏览器只检测“有没有这个属性”，不解析它的值。只要写了 open=，无论右边是 "false"、"" 还是 "banana"，都算“存在”，于是强制展开。
-
<details open></details>→ 展开 -
<details open=""></details>→ 展开 -
<details open="false"></details>→ 展开（⚠️常见误写） -
<details></details>→ 收起（没写就是没存在）
JavaScript 动态控制 open 状态的正确写法
直接读写 DOM 元素的 open 属性即可，它是反射属性，和实际状态实时同步。别碰 setAttribute。
- ✅ 正确：
el.open = false、console.log(el.open) - ❌ 错误：
el.setAttribute('open', 'false')→ 实际变成展开 - ❌ 错误：
el.hasAttribute('open') !== el.open：初始没写open时两者都是false；但执行过el.open = true后，hasAttribute仍返回false（HTML 属性没变，DOM 属性变了）
监听展开/收起变化必须用 toggle 事件
<details></details> 没有 change 事件。用户点击 <summary></summary> 或 JS 修改 el.open 后，会触发 toggle 事件，此时读 el.open 才是最新的。
- ✅ 正确：
el.addEventListener('toggle', () => console.log('当前状态:', el.open)) - ❌ 错误：监听
change、click或轮询el.open - 注意：
toggle在 Chrome 12+、Firefox 49+、Safari 15.4+ 均支持；IE 完全不支持，需用if ('open' in document.createElement('details'))做特性检测并降级
CSS 响应状态变化要用 details[open] 选择器
不能靠 class 切换，open 是原生属性，CSS 可直接捕获：
- 隐藏原生箭头：
summary::-webkit-details-marker { display: none; } - 自定义展开图标：
details[open] summary::before { content: "▼"; } - 动画展开（配合
max-height过渡）：details:not([open]) .content { max-height: 0; overflow: hidden; }，再设transition: max-height 0.3s ease
真正容易被忽略的是：JS 控制状态后，hasAttribute('open') 不会同步更新，而 CSS 选择器 details[open] 却能响应 DOM 属性变化——这意味着样式和脚本对“状态”的感知路径完全不同，混用时极易出错。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
