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