必须直接包裹 且 为首个子元素，禁用块级嵌套、display: block 或 float；箭头用 list-style: none + ::before 自定义更兼容；JS 控制用 .open = true 或 .toggleAttribute('open')，监听 toggle 事件；iOS 10.3 前不支持，需降级处理。
details 和 summary 标签怎么写才不塌陷
直接用 <details></details> 包住 <summary></summary> 就能实现折叠，但常见问题不是“不会写”，而是写了以后点不动、样式错位、或在 Safari 里默认展开关不掉。
关键点在于：<summary></summary> 必须是 <details></details> 的第一个子元素，且不能嵌套其他块级标签（比如 <p></p> 或 <div>），否则部分浏览器会忽略点击逻辑。
<ul>
<li>
<code><details><summary>标题</summary><p>内容</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><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></details> ✅ 安全
<details><div><summary>标题</summary></div>
<p>内容</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></details> ❌ Safari 可能失效<summary></summary> 加 display: block 或 float —— 它原生是 inline-level，强行改会破坏内置 toggle 行为summary 里的箭头图标怎么控制显隐
浏览器自动在 <summary></summary> 前加一个三角形（▶/▼），这个图标无法用 CSS 直接选中，但可以用 ::marker 伪元素控制（Chrome 115+、Firefox 117+ 支持），或者更稳妥地用 list-style: none + 自定义 ::before。
- 清除默认箭头：
summary { list-style: none; } - 手动加图标（推荐）：
summary::before { content: "▶"; margin-right: 6px; }，再用 JS 切换open状态时改 content 为 "▼" - 注意：Safari 目前不支持
::marker，所以自定义::before兼容性更好
details 标签的 open 属性和 JS 控制要注意什么
open 是布尔属性，存在即展开，不存在即收起。JS 操作时别用 .setAttribute('open', 'open')，而要用 .open = true 或 .toggleAttribute('open') —— 否则可能触发两次渲染或状态不同步。
- 初始展开：
<details open><summary>...</summary></details> - JS 展开：
el.open = true（不是el.setAttribute('open', '')） - 监听开关：
el.addEventListener('toggle', () => console.log(el.open))，不是click—— 因为用户可能用键盘空格键触发 - 服务端渲染时如果初始设了
open，但 JS 后续又调用el.removeAttribute('open')，会导致视觉卡顿（先展开再收起）
兼容性差在哪？哪些场景该绕开 details
IE 全系不支持，Edge 12–18 需要前缀（已淘汰），真正麻烦的是旧版 iOS Safari（iOS 10.3 之前）完全不识别 <details></details>，会把整个内容当普通文本渲染，且无任何降级提示。
- 内部有表单控件（如
<input>）时，部分安卓 WebView 会丢失焦点；建议只放纯文本或轻量 HTML（<strong></strong>、<a></a>可以，<iframe></iframe>不行） - SEO 友好，搜索引擎能索引
<details></details>内所有内容，但若内容靠 JS 动态注入，则可能不被抓取 - 如果项目必须支持 iOS 10 或 Android 4.x，就别用 —— 改用
aria-expanded+ 手动控制max-height动画更稳
细节上最易被忽略的是：summary 元素不能空，哪怕只放一个零宽空格 ，否则某些屏幕阅读器会跳过它，导致可访问性断裂。
