open是布尔属性，仅检测存在与否，写open="false"仍会强制展开；JS应直接读写open属性而非setAttribute；监听状态变化用toggle事件；IE不支持，且原生箭头需用::after自定义。
open 属性不是开关按钮，它只管页面加载那一刻的状态——存在就展开，不存在就收起。写成 open="false" 反而强制展开，这是最常踩的坑。
为什么 open="false" 会让 <details></details> 展开
因为 open 是布尔属性，浏览器只检测“有没有这个属性”，不解析它的值。只要写了 open=...，无论右边是 "false"、"" 还是 "banana"，都算“存在”，于是强制展开。
-
<details open></details>→ 展开 -
<details open=""></details>→ 展开 -
<details open="false"></details>→ 展开（⚠️常见误写） -
<details></details>→ 收起（没写就是没存在）
用 JavaScript 控制 open 状态时别调错 API
直接读写元素的 open 属性即可，它是反射属性（reflected property），和 DOM 状态实时同步。千万别用 setAttribute 或 getAttribute。
- ✅ 正确：
el.open = false、console.log(el.open) - ❌ 错误：
el.setAttribute('open', 'false')→ 实际变成展开 - ❌ 错误：
el.hasAttribute('open')≠el.open：初始没写open时，前者为false，后者也是false；但一旦执行过el.open = true，再查hasAttribute仍是false（HTML 属性没变，DOM 属性变了）
监听展开/收起变化要用 toggle 事件，不是 change
<details></details> 没有 change 事件。用户点击 <summary></summary> 触发状态切换后，会派发 toggle 事件，此时读 el.open 才是最新的。
立即学习“前端免费学习笔记（深入）”；
el.addEventListener('toggle', () => {
console.log('当前状态：', el.open); // true 表示刚展开，false 表示刚收起
});
注意：页面加载时若带 open 属性，toggle 不会触发——它只响应用户交互或 JS 主动赋值后的状态变更。
兼容性和样式限制这些地方容易被忽略
现代浏览器（Chrome 12+、Firefox 49+、Safari 6+、Edge 79+）都支持 <details></details> 和 open，但 IE 完全不支持，必须降级（比如用 <div> + JS 模拟）。另外，原生小三角图标无法用 CSS 直接替换，各浏览器用的是私有伪元素（如 <code>::marker），且支持度不一；要稳定自定义箭头，得先隐藏原生图标，再用 ::after 手动加。
