是个原生 HTML 折叠容器，而 是它唯一的可选子元素，同时也是默认的触发按钮。浏览器会自动处理展开与收起的状态，无需编写任何 JavaScript 即可正常工作。
同样，这个“折叠面板”还支持键盘操作与无障碍访问，值得关注的是，它的实现非常简洁。
是它唯一的可选子元素，同时也是默认的触发按钮。浏览器会自动处理展开与收起的状态，无需编写任何 JavaScript 即可正常工作。
同样，这个“折叠面板”还支持键盘操作与无障碍访问，值得关注的是，它的实现非常简洁。
先说说 details 和 summary 的基础用法。核心要点如下：
- details 默认处于折叠状态，添加 open 属性即可使其默认展开。
- summary 内可包含文字、图标乃至内联元素（比如 summary 会触发展开/收起切换，同时支持空格键和回车键的键盘导航，对无障碍访问十分友好。
来个最简单的例子：
```html
点击展开说明
这里是隐藏内容。
```
如何自定义 summary 的样式与箭头图标
浏览器为 summary 提供了默认箭头（▶ / ▼），但这些箭头在不同浏览器中外观各异，且直接使用 CSS 伪元素如 ::marker 进行覆盖效果有限。更可靠的方法是：隐藏原生箭头，然后自行添加自定义图标。
怎么操作？两个要点：
- 使用 summary::marker { content: none; } 移除默认标记，但需注意 Safari 15.4 及以上版本才稳定支持此方法。
- 更兼容的做法：在 summary 中手动插入一个 details[open] .toggle-icon 控制图标旋转或内容替换。
- 特别注意：不要使用 float 或 display: flex 破坏 summary 的内联特性，否则可能导致点击区域异常。
比如这样写：
```html
配置选项
…
```
使用 JavaScript 控制展开状态的注意事项
虽然 details 可以通过 open 属性直接控制，但使用 JavaScript 操作时容易遇到一些坑：
- 直接设置 element.open = true 虽然有效，但 DOM 上并不会同步显示 open 属性（仅 JS 属性发生变化）。
- 判断是否展开，应优先使用 element.hasAttribute('open')，而非 element.open——后者始终返回布尔值，但属性是否存在才是实际渲染的依据。
- 绑定 toggle 事件时需留意：该事件仅在用户交互时触发，若通过 JS 修改 open 属性不会触发该事件。如需监听所有变化，需手动 dispatch 事件。
举个例子：
```ja vascript
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 动画。如果需要淡入、滑动等效果，需借助 JavaScript 和 max-height 或 transform 模拟，此时直接使用 div + ARIA 反而更可控。
最后，重要提醒：切勿将重要的操作按钮或关键信息隐藏在默认折叠的 details 中——用户很可能无法注意到它们。
点击展开说明
这里是隐藏内容。
配置选项
…
