默认展开只需<details open>，不带等号或值；写open="false"仍强制展开，因open是布尔属性，只认存在与否。JS应操作el.open布尔值，监听toggle事件，CSS用details[open]选择器。

默认展开只需写 open，多一个字符都错；想默认收起，就一个字别写。

怎么让 details 页面一打开就展开

直接在 <details> 标签里加上 open 属性即可，不带等号、不带引号、不带值：

<details open>
  <summary>配置详情</summary>
  <p>这里的内容加载时就可见。</p>
</details>

• open 是布尔属性，浏览器只看“有没有”，不解析右边写了啥
• <details open="false">、<details open="">、<details open="banana"> 全部等效于展开——这是最常翻车的地方
• 服务端渲染或静态 HTML 中，这是最稳的方式，不依赖 JS，无障碍友好

为什么写 open="false" 反而展开了

因为 HTML 规范里明确把 open 定义为布尔属性（boolean attribute），语义就是“有即真，无即假”。它不是开关，也不是字符串配置项。

• 只要标签里出现了 open= 这三个字母（哪怕后面是 "0" 或 "no"），浏览器就认为属性“存在”
• <details> 没写 open → 初始收起（el.open === false）
• <details open="false"> → 初始展开（el.open === true），但 el.hasAttribute('open') 也返回 true，容易误判

JS 动态控制 open 状态的正确姿势

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

立即学习“前端免费学习笔记（深入）”；

• ✅ 正确：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 属性

CSS 响应展开/收起状态只能用 details[open]

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

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

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