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