HTML中open属性如何影响details元素折叠面板的默认展开状态？

本文共计559个文字，预计阅读时间需要3分钟。

open属性只能控制

为什么 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，否则会破坏状态一致性。