告别繁琐 JS，HTML 原生 <details> 标签的折叠面板实战

做网页开发时，常遇到一种高频交互：用户想看更多详情，但又不能跳转页面。比如常见的问题解答区（FAQ）、日志查看器里的错误堆栈，或者是表单里的扩展选项。过去处理这种需求，要么引入重型 UI 库，要么手写十几行 JavaScript 监听点击事件，甚至还要操心一下键盘导航支持。其实很多时候都是“杀鸡用牛刀”，浏览器原生的 <details> 和 <summary> 标签就能优雅解决，而且代码量能压缩到原来的十分之一。

这套标签的结构非常直观。外层用 <details> 包裹整个区域，内部首行放置 <summary> 作为点击标题。当用户点击标题时，浏览器会自动切换折叠状态，无需任何脚本干预。比如下面这段最基础的写法：

<details>
  <summary>点击查看详细信息</summary>
  <p>这里是原本隐藏的内容区域...</p>
</details>

除了基础功能，实际开发中最大的痛点通常是样式美化。浏览器默认的展开指示器通常是一个黑色小三角，既不符合设计风格也不够醒目。想要替换成自定义图标，核心在于隐藏默认的 marker 并添加伪元素。你可以利用 display: list-item; 移除列表特性，再配合 CSS 中的 ::-webkit-details-marker { display: none; } 彻底清除原生样式，接着在 <summary> 上通过 ::before 或 ::after 绘制一个加号或箭头。

视觉反馈做得好，用户体验会提升不少。建议在展开状态时改变箭头的角度，利用 CSS 的 transform: rotate(180deg) 配合 transition 实现平滑旋转。这样即便内容没有高度过渡动画，仅仅指针方向的变化也能给用户明确的视觉提示。毕竟，用户感知的是状态的改变，而不仅仅是容器的开合。

关于大家关心的展开高度动画问题，必须坦诚说明：原生 <details> 不支持内容高度的流畅过渡。这是因为标签一旦切换 open 状态，内容会立即渲染显示，不存在中间渐变过程。如果项目强依赖丝滑动画，通常需要额外借助少量 JavaScript 辅助计算高度，或者使用 content-visibility 等新技术做性能优化妥协。但在大多数后台管理系统或静态文档中，静态折叠的性能优势远大于那几毫秒的动画体验，且能避免复杂布局导致的闪烁。

另一个常被忽略的优势是无障碍访问（A11y）。使用传统 JS 实现的折叠菜单，开发者往往忘记手动补充 aria-expanded 等属性，导致屏幕阅读器无法识别状态变化。而 <details> 标签由浏览器底层接管语义，自动向辅助技术暴露当前状态，无需开发者额外编写 ARIA 标签。这对于符合 WCAG 标准的项目来说，简直是白送的合规福利。

从浏览器兼容性来看，目前主流的现代浏览器均已全面支持，即使是移动端也表现稳定。唯一需要顾虑的是老旧的 IE 环境，如果是面向国内政企客户的旧系统维护，可能需要准备一个简单的 Polyfill 回退方案。但对于绝大多数面向新用户的互联网产品，直接使用原生方案是最稳妥的选择。

别总想着造轮子，有时候浏览器自带的 API 最稳健。省下的代码量不仅能降低维护成本，还能让页面加载更快。下次再遇到简单的折叠需求，不妨先试试这两个标签，或许会发现新大陆的简洁之美。