open是布尔属性，存在即展开、不存在即收起；写open="false"仍强制展开；JS须直接读写el.open，监听用toggle事件，CSS用details[open]选择器。
open 是布尔属性，不是开关或字符串值
浏览器只检测 open 属性是否存在，完全忽略等号右边的任何值。写 open="false"、open="" 甚至 open="banana"，只要属性名出现了，就等价于展开——这是最常翻车的地方。
-
<details open>→ 展开（正确） -
<details open="false">→ 依然展开（⚠️错误但常见） -
<details>→ 收起（默认行为）
它不参与逻辑判断，也不接受布尔字符串；HTML 规范里明确将其定义为“布尔属性”（boolean attribute），语义就是“有即真，无即假”。
JavaScript 动态控制必须读写 open 属性，别碰 setAttribute
open 是反射属性（reflected property），DOM 元素上的 el.open 和实际渲染状态实时同步。用 setAttribute 会把字符串写进 HTML 属性，反而触发“存在即展开”逻辑。
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- ✅ 正确：
el.open = false、console.log(el.open) - ❌ 错误：
el.setAttribute('open', 'false')→ 实际强制展开 - ❌ 错误：
el.hasAttribute('open') !== el.open：初始没写时两者都是false；但执行el.open = true后，hasAttribute仍返回false（HTML 源码未变）
监听状态变化只能用 toggle 事件
<details> 没有 change 事件。用户点击 <summary> 或 JS 修改 el.open 后，触发的是 toggle 事件，此时读 el.open 才是最新值。
立即学习“前端免费学习笔记（深入）”；
- ✅ 正确：
el.addEventListener('toggle', () => console.log(el.open)) - ❌ 错误：
el.addEventListener('change', ...)→ 根本不会触发 - ⚠️ 注意：
toggle在 Chrome 12+、Firefox 49+、Safari 15.4+ 支持；IE 完全不支持，需用'open' in document.createElement('details')做特性检测
CSS 响应状态要用 details[open] 选择器
不能用伪类如 :checked，也不能靠 class 切换。CSS 可直接捕获原生属性变化：
- 显示/隐藏内容：
details:not([open]) .content { max-height: 0; overflow: hidden; } - 自定义箭头：
details[open] summary::before { content: "▼"; } - ⚠️ 注意：
details[open]能响应 DOM 属性变化，但hasAttribute('open')不行——样式和脚本对“状态”的感知路径不同，混用极易出错
open，或 JS 控制后又依赖 hasAttribute 判断状态，就会出现“看起来展开了，但代码认为没展开”这类不一致问题。 
