17370845950

元素的展开状态唯一由 open 属性布尔值决定， 无状态属性；JS 应直接读取 details.open 或监听 toggle 事件获取实时状态，禁用 click 或类名判断。

details 元素的默认行为与识别逻辑

是原生可展开/折叠的语义化容器，浏览器自动为它添加了“展开/收起”状态管理能力。它不依赖 JavaScript 就能工作，但它的状态（open 属性是否存在）才是识别“是否已展开”的唯一可靠依据。

注意：

本身没有状态属性，它只是

的第一个子元素，且会被浏览器特殊处理（如添加小三角、触发 toggle 行为）。不能通过检查

是否有某个 class 或属性来判断展开状态。

用 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 结构变化”，都只是它的衍生结果。