原生标签配合可实现无js折叠功能，须为首个子元素且仅一个；默认关闭，加open属性可默认展开；兼容现代浏览器但不支持ie；css可通过重置list-style和display控制样式；语义化强，利于无障碍访问。
用 <details></details> 和 <summary></summary> 实现可折叠内容
HTML 原生支持细节展示区域，不需要 JS 就能实现点击展开/收起。核心就是一对配合使用的标签：<details></details> 是容器，<summary></summary> 是标题栏（且必须是它的第一个子元素）。
常见错误是把 <summary></summary> 写在 <details></details> 外面，或者加了多个 <summary></summary> —— 浏览器只识别第一个，其余被忽略。
-
<details></details>默认是关闭状态；加open属性可默认展开：<details open></details> -
<summary></summary>里可以放文字、图标甚至<span></span>，但别嵌套交互元素（如按钮、链接）再加onclick，会和原生展开逻辑冲突 - 不支持 IE，Edge 79+、Chrome 12+、Firefox 49+、Safari 6.2+ 可用；旧版本需降级为 JS 模拟
样式控制：怎么让 <summary></summary> 看起来不像默认的三角箭头
浏览器对 <summary></summary> 有内置样式（比如左侧小三角），但可通过 CSS 覆盖。关键是重置 list-style 并处理伪元素。
容易踩的坑是直接写 summary { background: #eee; } 却发现没生效 —— 因为部分浏览器（如 Safari）对 <summary></summary> 应用了 display: list-item，需要显式设为 display: block 才能稳定控制。
立即学习“前端免费学习笔记（深入）”；
- 隐藏默认箭头：
summary { list-style: none; }或summary::marker { content: ""; } - 自定义展开/收起图标：用
<details></details>的open属性配合属性选择器，例如details[open] summary::after { content: "▼"; } - 注意：不要给
<summary></summary>设pointer-events: none，否则点不动
无障碍与语义：为什么不能用 <div> + JS 模拟
<p><code><details></details> 是 ARIA 推荐的语义化方案，屏幕阅读器能自动识别其展开状态、角色（role="group"）和操作方式（“按空格或回车展开”）。换成 <div> 后，必须手动加 <code>aria-expanded、aria-controls、键盘事件监听（空格/回车/方向键），漏一点就影响可用性。
使用场景很明确：FAQ、技术文档中的配置项说明、表单里的高级选项——只要内容属于“非必需即时可见”，就优先用原生标签。
- JS 不该用来“实现功能”，而该用来“增强行为”，比如添加平滑滚动或动画
- 如果服务端渲染时要默认展开某一项，直接输出
<details open></details>即可，别等 JS 加载完再操作 DOM - 避免在
<details></details>内部放<form></form>或<iframe></iframe>，某些老浏览器可能触发意外重绘或焦点丢失
兼容性兜底：当必须支持 IE 时怎么办
IE 完全不识别 <details></details>，会把它当普通 <div> 渲染，内容始终可见，且无交互。这时候不能靠 CSS hack，得用 JS 补齐行为。
<p>重点不是重写整个组件，而是最小化干预：只在 IE 下启用 JS 控制，其他浏览器保持原生逻辑。这样既保语义，又不增加现代浏览器负担。</p>
<ul>
<li>检测方式别用 UA 字符串，用特性检测：<code>if (!('open' in document.createElement('details')))
<summary></summary> 的 click，然后 toggle <details></details> 的 open 属性，并同步更新 aria-expanded
<details></details> 单独初始化，避免动态插入内容后失效细节区域的复杂点不在结构，而在状态同步和焦点管理——尤其是嵌套 <details></details> 或内部有表单控件时，open 切换后焦点是否回到 <summary></summary>、键盘导航是否连贯，这些才是真实项目里容易被跳过的环节。
