元素的展开状态唯一由 open 属性布尔值决定， 无状态属性；JS 应直接读取 details.open 或监听 toggle 事件获取实时状态，禁用 click 或类名判断。
details 元素的默认行为与识别逻辑
open 属性是否存在）才是识别“是否已展开”的唯一可靠依据。
注意：
用 JavaScript 检测 details 是否已展开
直接读取 details.open 属性是最准确的方式。该属性是布尔值，true 表示当前处于展开状态。
- DOM 查询后立即访问
.open即可，无需监听事件 - 如果页面加载时
.open初始值就是true - 用户点击
.open会自动同步更新，无需手动维护
const details = document.querySelector('details');
console.log(details.open); // true 或 false
监听展开/收起状态变化
toggle 事件（注意不是 click），每次用户点击
立即学习“前端免费学习笔记（深入）”；
-
toggle事件不冒泡，需在 - 事件触发时，
details.open已是最新值，可直接读取 - 不要用
click监听.open已更新
document.querySelector('details').addEventListener('toggle', function() {
console.log('当前状态：', this.open);
});
常见误判场景与兼容性提醒
某些旧版 Safari（toggle 事件支持不完整，但 .open 属性始终可用。如果必须兼容极老环境，避免依赖事件，改用定时轮询或 MutationObserver 监听 open 属性变更（极少需要）。
- 不要用
getComputedStyle(details).display === 'block'判断——display: none，但展开后是display: block，这属于副作用，不可靠（比如 CSS 覆盖后就失效） - 不要给
data-state并手动维护——违背语义，容易不同步 - 服务端渲染时，若初始带
open属性，客户端 JS 访问.open仍是true；若没写open，则为false
真正需要识别的，永远只是那个 open 属性。其他所有“视觉表现”或“DOM 结构变化”，都只是它的衍生结果。
