details标签的open属性是布尔属性，仅由是否存在决定状态，JavaScript应直接读写.open属性并监听toggle事件，CSS需用details[open]选择器响应状态变化。

标签的开闭状态由 `open` 属性控制，但它的行为和 JavaScript 交互方式有明确规范，稍不注意就容易出错。

open 是布尔属性，不是字符串开关

它只看“有没有写”，不解析等号右边的值：

• <details open> → 展开
• <details open="false"> → 依然展开（常见误解）
• <details open=""> 或 <details open="anything"> → 全部展开
• <details>（完全不写）→ 默认收起

纯 HTML 场景下，想默认展开，只需加 open；想默认收起，就什么也不加。

JavaScript 控制必须读写 .open 属性

DOM 元素的 open 是一个反射属性（reflected property），直接对应当前状态：

• ✅ el.open = true → 展开
• ✅ el.open = false → 收起
• ✅ console.log(el.open) → 返回 true 或 false

不要用 setAttribute：

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

Alibabacloud Sdk Client Initialization For Java

在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。

下载

• ❌ el.setAttribute('open', 'false') → 实际触发展开（因为属性被写入，“存在”即生效）
• ❌ el.hasAttribute('open') 不能替代 el.open，两者不同步：初始时都为 false，但 JS 设置 el.open = true 后，hasAttribute 仍返回 false

推荐切换写法：

• el.toggleAttribute('open') —— 语义清晰，同时更新 DOM 属性和状态

状态变化监听只能用 toggle 事件

<details> 没有 change 事件，click 也不可靠（会干扰键盘操作和屏幕阅读器）：

• ✅ 正确监听：

  el.addEventListener('toggle', () => {
  console.log('当前是否展开？', el.open); // 此时 el.open 已是最新的布尔值
  });

• ⚠️ 注意：页面加载时若带 open 属性，toggle 不会触发；它只响应用户点击或 JS 主动赋值后的状态变更。

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

样式应基于 DOM 属性变化，而非 HTML 源码：

• ✅ details[open] .content { max-height: 300px; }
• ✅ details:not([open]) summary::after { content: "▶"; }
• ❌ details[open="false"] → 无效，浏览器不解析值
• ❌ 用 JS 加 class 来模拟状态 → 多余且易错

关键细节：JS 设置 el.open = false 后，CSS details[open] 立刻失效，但 hasAttribute('open') 仍为 false —— 这是 DOM 属性与 HTML 属性两条路径，别混用。

不复杂但容易忽略。