details 和 summary 是浏览器原生支持的折叠组件，无需 JS 即可实现点击展开/收起，语义化强、无障碍友好；summary 必须为 details 的首个子元素，通过 ::marker 自定义箭头，用 [open] 控制展开样式。
用 details 和 summary 最快实现点击展开收起
浏览器原生支持，不用 JS、不引库、零学习成本。只要两个语义化标签嵌套，就能做出可点击切换的折叠区域。
常见错误是手动写 onclick + display: none 切换，既冗余又破坏可访问性。而 details 是专门为这个场景设计的 HTML 元素，自带 ARIA 属性和键盘支持（空格/回车都能触发）。
-
details是容器，初始默认收起；加open属性可默认展开 -
summary必须是details的第一个子元素，它就是那个可点击的标题栏 - 里面可以放任意 HTML 内容（
p、ul、甚至iframe），不限文本
<details>
<summary>点我展开</summary>
<p>这里是被隐藏的内容，可以很长。</p>
<pre class="brush:php;toolbar:false;">console.log("hello");
想自定义样式？重点改 summary::marker 和 details[open]
浏览器默认会在 summary 前加一个三角箭头，但这个箭头不是文字也不是伪元素，而是 ::marker —— 很多人卡在这儿，以为用 ::before 就能覆盖，结果无效。
立即学习“前端免费学习笔记（深入）”；
另外，details 展开时会带 [open] 属性，这是你控制内部样式的关键钩子，比如让展开后背景变浅、加边框等。
- 去掉默认箭头：
summary::marker { content: ""; } - 加自定义图标（用字体或 SVG）：
summary::after { content: "▶"; }，再配合details[open] summary::after { content: "▼"; } - 展开时给内容区加过渡动画？不行——
details不支持height过渡，因为高度是自动计算的。真要动效得用 JS 配合max-height
IE 和旧版 Safari 不支持？那就用 aria-expanded + 简单 JS 回退
details 在 IE 全系、Safari ≤ 11.1 中完全不可用。如果项目必须兼容这些环境，不能硬上，得降级。
核心思路：检测是否支持 details，不支持就用 div 模拟，手动管理 aria-expanded 和 hidden 属性，保持语义和键盘可用性。
- 检测方式：
"open" in document.createElement("details") - JS 只需监听
summary点击，然后切换hidden属性和aria-expanded值 - 别忘了给
summary加tabindex="0"，否则键盘用户点不到 - CSS 回退规则里，对不支持的环境用
.no-details summary + * { display: none; }控制隐藏
别把 details 当 Accordion 用（多个联动）
原生 details 是独立开关，彼此不干扰。如果你需要“一次只展开一个”，比如 FAQ 折叠面板，就得自己加逻辑控制 —— 浏览器不会帮你关掉别的 details。
容易踩的坑是直接在 summary 上绑 click，然后遍历所有兄弟 details 设 open = false，结果发现：用户用键盘打开后，再按 Tab 切到下一个 summary，前一个没自动关闭，体验断裂。
- 正确做法：监听
toggle事件（details原生事件），再统一处理其他项 - 或者更稳一点：用 JS 实现整个 Accordion，把
details当纯样式占位，逻辑全由 JS 掌控 - 移动端双击缩放问题？某些 iOS 版本下快速连点可能触发缩放，加
viewport的user-scalable=no不推荐，改用touch-action: manipulation更精准
真正麻烦的从来不是怎么展开，而是怎么让展开后的内容不撑破布局、不打断屏幕阅读器节奏、不和第三方组件打架。这些细节没试过几遍根本想不到。
