<summary> 标签必须嵌套在 <details> 内作为其第一个子元素才有效，单独使用会被浏览器忽略；<details> 控制展开/收起行为，<summary> 仅渲染带箭头的标题行，支持原生无 JS 切换与基础语义化。
Summary 标签本身不提供折叠功能，必须配合 Details 标签使用
单独写 <summary> 是无效的，浏览器会忽略它。它只是 <details> 的可选子元素，用来定义折叠区域的标题行。真正控制展开/收起行为的是 <details> 元素本身 —— 它原生支持零 JS 的布尔切换，<summary> 只负责渲染那个带小箭头的交互入口。
常见错误是把 <summary> 当成独立组件用，比如塞进 <div> 里，结果点击没反应、控制台也没报错，只是完全没效果。
-
<details>默认处于折叠状态（open属性未设置） - 点击
<summary>区域会自动切换open属性值，触发浏览器原生动画（无 CSS 时是硬切，加transition可软化） -
<summary>必须是<details>的第一个子元素，否则语义失效，部分屏幕阅读器可能无法识别
如何让 Details + Summary 支持自定义样式和过渡动画
原生 <details> 展开时内容是突然出现的，没有淡入或高度过渡。要加动画，得靠 CSS 配合 details[open] 伪类和 max-height 技巧 —— 因为 height: auto 无法 transition。
关键点在于：不能直接对 <details> 或 <summary> 做 height 过渡，而是对内部容器（比如 <div>）设 max-height，并利用 [open] 状态切换数值。
立即学习“前端免费学习笔记（深入）”；
DMap GL地图JSAPI（dmapgl）开发指南。用于编写、审查、调试 DMap 地图 API 代码，涵盖地图初始化、覆盖物渲染、图层管理、事件处理、控件交互等任务。当用户提及 dmap、dmapgl、jsapi‑gl 或相关地图开发需求时自动触发。
- 给
<details>内部内容包一层<div class="details-content"> - 初始状态设
.details-content { max-height: 0; overflow: hidden; transition: max-height 0.3s ease-in-out; } - 展开时用
details[open] .details-content { max-height: 300px; }（值需略大于内容实际高度） - 箭头图标可用
summary::marker覆盖，或用summary::before+transform: rotate()模拟旋转效果
兼容性与语义注意事项
<details> 在 Chrome 12+、Firefox 49+、Safari 6+、Edge 79+ 中原生支持，IE 全系不支持。如果必须兼容 IE，得回退到 JS 方案，但现代项目中通常可安全使用。
语义上，<details> 表示“用户可选查看的补充信息”，不是导航菜单或 Tab 面板。滥用会导致屏幕阅读器播报混乱，比如在文档大纲中错误地嵌套层级。
- 不要用
<details>替代<accordion>组件做多选一逻辑（原生允许多个同时展开） - 避免在
<details>内放表单控件后又依赖 JS 提交，因为折叠状态不影响表单字段是否参与提交 - 移动端 Safari 对
summary::marker支持有限，建议统一用自定义图标 + JS 检测降级
一个最小可用示例
下面代码可直接复制进 HTML 文件运行，无 JS，带基础过渡：
<details>
<summary>点击展开说明</summary>
<div class="details-content">
这里是折叠的内容。支持段落、列表、甚至内嵌 <code><pre class="brush:php;toolbar:false"></code>。
</div>
</details>
<p><style>
.details-content {
max-height: 0;
overflow: hidden;
transition: max-height 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
details[open] .details-content {
max-height: 200px; /<em> 根据内容调整 </em>/
}
summary {
list-style: none;
padding: 8px 12px;
background: #f5f5f5;
cursor: pointer;
}
summary::marker { content: "▶ "; }
details[open] summary::marker { content: "▼ "; }
</style>注意 max-height 值不是固定写死的 —— 如果内容高度超过设定值，会出现滚动条或截断；太小则动画卡顿。实际项目中建议用 JS 动态计算（但那就违背“零 JS”前提了），所以更稳妥的做法是预估最大高度，留出余量。
