details标签不展开的主因是summary未作为其第一个子元素，且不可被其他标签包裹；自定义图标或按钮需避免破坏交互；iOS Safari需JS补open属性；折叠后内容仍运行，须手动暂停。
details标签不展开？检查summary是否被包裹或缺失
HTML <details></details> 默认是收起状态，但点不了、没箭头、完全没反应，八成是 <summary></summary> 写错了位置。它必须是 <details></details> 的第一个子元素，且不能被其他标签（比如 <div> 或 <code><p></p>）包着。
-
<details><summary>标题</summary><p>内容</p></details>✅ 正常 -
<details><div><summary>标题</summary></div> <p>内容</p></details>❌ 不触发展开 -
<details><p><summary>标题</summary></p> <p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p><div class="aritcle_card flexRow"> <div class="artcardd flexRow"> <a class="aritcle_card_img" href="/xiazai/skill11445" title="使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审"><img src="https://img.php.cn/upload/skill/001/246/273/6adaf20e695c2374.jpg" alt="使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审" ></a> <div class="aritcle_card_info flexColumn"> <a href="/xiazai/skill11445" title="使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审">使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审</a> <p>使用经过文档化的设计技能，从真实的品牌或项目背景中生成HTML原生原型、幻灯片、动态演示、可视化图表和评审流程。</p> </div> <a href="/xiazai/skill11445" title="使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div> <p>内容</p></details>❌ Safari 和旧版 Chrome 可能失效
summary里放图标或按钮后点击失灵？别用display: inline-block强行改布局
很多人想在 <summary></summary> 里加个自定义箭头图标或右侧按钮，结果点了 summary 没反应。问题常出在 CSS 上：display: inline-block 或 float 会破坏 <summary></summary> 的内置交互行为，尤其在 Firefox 中明显失效。
- 用
::marker伪元素改箭头（Chrome/Firefox 支持），比手动加<span></span>更稳 - 如果真要加按钮，确保按钮本身不阻止事件冒泡：
onclick="event.stopPropagation()"会吃掉 toggle 行为 - 避免给
<summary></summary>设pointer-events: none或user-select: none，这会让整个区域变“哑”
details在iOS Safari中不支持open属性？得用JS补兼容
open 属性本意是让详情默认展开，但它在 iOS 15.4 之前的 Safari 中完全被忽略——页面加载后仍是收起状态，哪怕你写了 <details open></details>。
- 检测是否需要 JS 补救：
if (!HTMLDetailsElement || !('open' in document.createElement('details'))) - 简单补法：
document.querySelectorAll('details[open]').forEach(el => el.open = true)，放在DOMContentLoaded后执行 - 注意：不要在
load事件里才设，否则用户可能看到“闪一下再展开”
details内容含表单或iframe时，折叠后还会触发渲染？别信“看不见就停”
<details></details> 折叠只是视觉隐藏，里面所有内容（<iframe></iframe>、<video></video>、<script></script>）仍在 DOM 中运行。比如嵌了个 YouTube iframe，即使收起，视频仍可能自动播放、消耗流量。
- 真正想“暂停”，得监听
toggle事件手动控制：el.addEventListener('toggle', () => { if (!el.open) iframe.src = ''; }) - 含动态脚本的区域，建议用
innerHTML = ''清空再收起，或用display: none+removeChild配合管理 - 性能敏感场景（如大量折叠表格行），
<details></details>不是替代虚拟滚动的方案，它不卸载 DOM
细节折叠看着简单，但 open 属性靠不住、summary 位置很娇气、折叠后资源照常跑——这些都不是浏览器 bug，而是规范本来就没承诺“卸载”。真要省资源，得自己动手关 iframe、清定时器、删 script 标签。
