details的open是布尔属性，只能通过element.open=true/false操作，不能用setattribute或字符串值控制，否则无效。
details标签的open属性不能用字符串值控制
HTML中details标签的open是布尔属性，不是普通字符串属性。写成open="false"或open="0"依然会被浏览器当作“存在即为true”，导致始终展开。只有完全移除该属性，才能关闭面板。
用JavaScript切换open状态的正确方式
必须通过element.open这个DOM属性（而非setAttribute）来读写，它返回/接收布尔值：
const details = document.querySelector('details');
// 打开
details.open = true;
// 关闭
details.open = false;
// 切换
details.open = !details.open;
-
details.open是可读写的IDL属性，和input.checked行为一致 - 不要用
details.setAttribute('open', 'true')——这只会让元素“看起来有open”，实际无效 - 监听
toggle事件时，event.target.open反映的是切换后的真实状态
Vue/React等框架中绑定open的常见误区
在响应式框架里，直接绑定:open="isOpen"通常不生效，因为原生details不支持属性响应式绑定（它没有open的attribute-to-property映射机制）：
- Vue：需用
v-bind:open.exact或更稳妥地用ref+watch手动赋值el.open - React：不能用
open={isOpen}，应改用useEffect同步ref.current.open - 纯HTML+JS场景下，避免混用
setAttribute和.open，否则状态易错乱
兼容性与无障碍注意事项
details本身在Chrome 12+/Firefox 49+/Safari 6+支持良好，但动态控制open时要注意：
- IE完全不支持
details，需降级方案（如用div模拟） - 用
details.open = false后，屏幕阅读器会正确识别折叠状态 - 不要依赖CSS的
[open]伪类做核心交互逻辑，它只反映attribute存在，不等于真实展开状态
真正要改状态，永远操作.open属性，而不是attribute。这点和disabled、checked一样，容易被当成普通HTML属性误用。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
