details 标签不展开是因为缺少必需的 <summary> 子元素，它必须是 details 的第一个子元素且不能为空；正确写法为 <details><summary>标题</summary>内容</details>。
details 标签不展开？检查是否漏了 <summary>
没有 <summary>，<details> 就不会显示可点击区域，更不会折叠——浏览器直接当普通容器渲染，连箭头都不画。这是最常被忽略的硬性依赖。
必须成对使用：<details><summary>标题</summary>内容</details>。只写 <details> 或只写 <summary> 都无效。
-
<summary>必须是<details>的**第一个子元素**，否则部分浏览器（如 Safari）可能忽略折叠逻辑 - 可以嵌套 HTML，比如加
<strong>或图标，但别用<button>—— 会干扰默认展开行为 - 不要指望 CSS 伪元素（如
::before）替代<summary>：它不是装饰，是功能节点
Chrome/Firefox 行为一致，但 Safari 对空 <summary> 更敏感
Chrome 和 Firefox 遇到空 <summary>（比如只有空格或换行）会勉强渲染一个默认“▶”按钮；Safari 则大概率完全不显示可点击区域，整个 <details> 看起来像段落文本。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 确保
<summary>内有可见文本，哪怕只是<summary>展开</summary> - 避免
<summary> </summary>或仅含注释<!-- --> - 用
getComputedStyle(summary).content在控制台快速验证是否被识别为有效 summary 节点
想默认展开？用 open 属性，别用 JS 模拟
加 open 属性是最轻量、最可靠的方式：<details open><summary>说明</summary>正文</details>。JS 动态设置 element.open = true 也行，但没必要绕一圈。
注意两个坑：
- 不要写
open="true"或open="open"——open是布尔属性，存在即生效，值是什么无关紧要 - 服务端渲染时若动态决定是否展开，直接输出
open属性即可，别靠 JS 后续操作，避免闪屏 - 用
:not([open])做 CSS 样式隔离比监听事件更稳，比如隐藏某些子元素
和 JS 交互时，监听 toggle 事件比 click 更准确
用户可能通过空格键、回车键或屏幕阅读器触发展开/收起，click 事件捕获不到这些行为。原生 toggle 事件才是语义正确的监听点。
示例：
const details = document.querySelector('details');
details.addEventListener('toggle', () => {
console.log('当前状态：', details.open); // true 或 false
});-
toggle在每次展开/收起后触发，包括初始open属性导致的“首次展开” - 不要在
toggle里调details.open = !details.open—— 会造成无限循环 - 需要延迟加载内容？在
toggle里判断!details.open（即刚收起）再清理资源，比用visibility或display更精准
细节折叠不是视觉动效，而是语义化交互。浏览器原生支持很稳，但只要漏掉 <summary> 或误用属性，它就彻底退化成普通 div —— 这种“失效”往往悄无声息，得靠结构审查才能发现。
