open属性仅控制details初始状态，存在即展开、不存在即收起；写open="false"因属布尔属性仍会强制展开；JS须直接读写el.open而非setAttribute；监听用toggle事件；CSS用details[open]选择器；IE不支持。
open 属性只控制 <details> 元素的初始展开状态，不是实时开关，也不是布尔值字符串——它存在即为 true，不存在即为 false。
为什么 open="false" 反而强制展开
浏览器把 open 当作布尔属性（boolean attribute），只检测是否“写了这个属性”，完全忽略等号右边的值。哪怕你写 open="false"、open="" 甚至 open="banana"，只要属性名出现了，就等价于 open，面板必然展开。
常见错误写法：
-
<details open="false">→ 实际展开（⚠️最常踩的坑） -
<details open="">→ 展开 -
<details open="true">→ 展开 -
<details>→ 收起（正确默认写法）
JavaScript 动态控制 open 状态的正确姿势
必须直接读写 DOM 元素的 open 属性，不能用 setAttribute 或 getAttribute，否则会破坏状态一致性。
立即学习“前端免费学习笔记（深入）”；
正确操作：
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
-
el.open = true→ 展开 -
el.open = false→ 收起 -
console.log(el.open)→ 返回true或false -
el.addEventListener('toggle', () => { ... })→ 唯一可靠的监听方式
错误操作：
-
el.setAttribute('open', 'false')→ 实际触发展开 -
el.hasAttribute('open')≠el.open：前者查 HTML 属性，后者查 DOM 状态；DOM 修改后，HTML 属性不会自动同步
CSS 响应 open 状态变化的写法
不能用伪类如 :checked，要用属性选择器 details[open]。
示例：
details summary::after {
content: " ▼";
}
details[open] summary::after {
content: " ▲";
}
注意：details[open] 是 CSS 中唯一能匹配当前展开状态的选择器；:has(> summary:active) 等写法不可靠，且不被所有浏览器支持。
最容易被忽略的一点：IE 完全不支持 <details> 和 open，如果需兼容旧浏览器，得用 <div> + JS 手动模拟，不能只靠 HTML 属性降级。
