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

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

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

注意：<summary> 本身没有状态属性，它只是 <details> 的第一个子元素，且会被浏览器特殊处理（如添加小三角、触发 toggle 行为）。不能通过检查 <summary> 是否有某个 class 或属性来判断展开状态。

用 JavaScript 检测 details 是否已展开

直接读取 details.open 属性是最准确的方式。该属性是布尔值，true 表示当前处于展开状态。

• DOM 查询后立即访问 .open 即可，无需监听事件
• 如果页面加载时 <details open> 已存在，.open 初始值就是 true
• 用户点击 <summary> 后，.open 会自动同步更新，无需手动维护

const details = document.querySelector('details');
console.log(details.open); // true 或 false

监听展开/收起状态变化

<details> 元素会触发 toggle 事件（注意不是 click），每次用户点击 <summary> 都会触发一次，无论展开还是收起。

Wechat Article Html

将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。

下载

立即学习“前端免费学习笔记（深入）”；

• toggle 事件不冒泡，需在 <details> 上直接监听
• 事件触发时，details.open 已是最新值，可直接读取
• 不要用 click 监听 <summary> —— 它无法区分是首次点击还是重复点击，也无法保证 .open 已更新

document.querySelector('details').addEventListener('toggle', function() {
  console.log('当前状态：', this.open);
});

常见误判场景与兼容性提醒

某些旧版 Safari（toggle 事件支持不完整，但 .open 属性始终可用。如果必须兼容极老环境，避免依赖事件，改用定时轮询或 MutationObserver 监听 open 属性变更（极少需要）。

• 不要用 getComputedStyle(details).display === 'block' 判断——<details> 内容区默认是 display: none，但展开后是 display: block，这属于副作用，不可靠（比如 CSS 覆盖后就失效）
• 不要给 <summary> 添加 data-state 并手动维护——违背语义，容易不同步
• 服务端渲染时，若初始带 open 属性，客户端 JS 访问 .open 仍是 true；若没写 open，则为 false

真正需要识别的，永远只是那个 open 属性。其他所有“视觉表现”或“DOM 结构变化”，都只是它的衍生结果。