details是原生HTML折叠容器，summary为其唯一可选子元素且默认为触发按钮；浏览器自动处理展开/收起，支持键盘操作与无障碍访问，无需JS即可工作。
details 和 summary 的基本用法
details 是原生 HTML 折叠容器，summary 是它唯一的可选子元素，也是默认的触发按钮。浏览器自动处理展开/收起状态，不需要 JS 就能工作。
-
details默认是折叠的；加open属性让它默认展开 -
summary里可以放文字、图标甚至内联元素（比如<span>或<svg>），但不能放<div>这类块级元素（会破坏语义和渲染） - 点击
summary触发切换，空格键和回车键也支持键盘操作，无障碍友好
<details> <summary>点击展开说明</summary> <p>这里是隐藏内容。</p> </details>
如何自定义 summary 的样式和箭头
浏览器对 summary 的默认箭头（▶ / ▼）不统一，且无法直接用 CSS 覆盖伪元素（如 ::marker 支持有限）。更可靠的做法是隐藏原生箭头，自己加图标：
- 用
summary::marker { content: none; }移除默认符号（注意 Safari 15.4+ 才稳定支持） - 更兼容的方式：在
summary内手动插入<span class="toggle-icon">，配合details[open] .toggle-icon切换旋转或内容 - 不要用
float或display: flex破坏summary的内联特性，否则可能影响点击热区
<details>
<summary>
<span class="toggle-icon">▸</span> 配置选项
</summary>
<div>…</div>
</details>JS 控制展开状态的注意事项
虽然 details 原生支持 open 属性，但 JS 操作时容易踩坑：
- 直接改
element.open = true有效，但 DOM 中不会同步显示open属性（只反映在 JS 属性上） - 检测是否打开应优先用
element.hasAttribute('open')，而不是读element.open（后者始终返回布尔值，但属性存在与否才是渲染依据） - 绑定
toggle事件时，注意它只在用户交互时触发（JS 修改open不触发），若需监听所有状态变化，得手动 dispatch
const el = document.querySelector('details');
el.addEventListener('toggle', () => {
console.log('用户点了 summary');
});嵌套、性能与兼容性底线
details 可以嵌套，但深层嵌套会影响可访问性和触控体验；实际项目中建议最多两层。
立即学习“前端免费学习笔记（深入）”；
- IE 完全不支持，Edge 79+、Chrome 12+、Firefox 49+、Safari 6.1+ 支持良好
- 不要指望用它做复杂动画：CSS
transition对details内容高度无效（因为它是 display 切换，不是 height 动画） - 如果需要淡入/滑动效果，得配合 JS +
max-height或transform模拟，此时不如直接用div+ ARIA 更可控
真正要注意的是：别把重要操作按钮或关键信息藏在默认折叠的 details 里——用户可能根本看不到。
