open是布尔属性，存在即展开、不存在即收起；写open="false"仍强制展开；默认展开只需标题内容，js应操作el.open布尔值，监听toggle事件，css用details[open]选择器。

open 是布尔属性，只看是否存在，不解析值；写 open="false" 仍会强制展开——这是最常翻车的地方。

怎么让 details 默认展开（纯 HTML）

直接加 open 属性即可，无需任何值：

<details open><summary>标题</summary><p>内容</p>
</details>

• open 是布尔属性，浏览器只检测它是否“写了”，不关心等号右边是什么
• <details open="false"></details>、<details open=""></details>、<details open="banana"></details> 全部等效于展开
• 想默认收起？就完全不写 open —— <details></details> 即可
• 服务端渲染或静态 HTML 中，这是最稳定、无 JS 依赖的方式

用 JavaScript 动态控制 open 状态的正确姿势

必须操作 DOM 元素的 open 属性，而不是 HTML 属性：

anything-to-html

将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。

下载

• ✅ 正确：el.open = true、el.open = false、console.log(el.open)
• ❌ 错误：el.setAttribute('open', 'false') → 实际触发展开（因为属性被写入，存在即生效）
• ❌ 错误：el.hasAttribute('open') ≠ el.open：初始没写时两者都为 false；但执行 el.open = true 后，hasAttribute 仍返回 false（HTML 源码未变）
• ? 推荐切换方式：el.toggleAttribute('open')，语义清晰且同步 DOM 与 HTML 属性

监听展开/收起变化只能用 toggle 事件

details 没有 change 事件，click 也不可靠：

• ✅ 正确：el.addEventListener('toggle', () => console.log(el.open))
• ❌ 错误：el.addEventListener('change', ...) → 根本不会触发
• ❌ 错误：给 <summary></summary> 绑 click → 干扰键盘（Enter/Space）和屏幕阅读器行为
• ⚠️ 注意：toggle 在状态变更后派发，此时 el.open 已是最新的布尔值；首次加载不触发

CSS 响应状态要用 details[open] 选择器

不能靠 JS 添加 class，也不能用 [open="false"] 这类写法：

• ✅ 正确：details[open] .content { max-height: 200px; }
• ✅ 正确：details:not([open]) summary::after { content: "▼"; }
• ❌ 错误：details[open="false"] → 无效，浏览器不解析值
• ⚠️ 关键细节：CSS 的 [open] 选择器响应的是 DOM 属性变化（哪怕由 JS 设置），而 hasAttribute() 查的是 HTML 源码——这两条路径不同步，混用极易出错

真正容易被忽略的是：JS 修改 el.open 后，hasAttribute('open') 不更新，但 CSS details[open] 会立刻响应。这意味着样式和脚本对“是否展开”的判断依据根本不是一回事。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！