一、标签本质与交互机制

作为 HTML5 规范中新增的语义化容器，<details> 标签通过浏览器原生支持的折叠/展开交互，为开发者提供了一种轻量级的内容展示解决方案。其核心特性体现在三个方面：

语义化结构
该标签明确表示文档中需要折叠展示的补充信息，与 <summary> 标签配合使用时，形成完整的语义单元。这种结构不仅利于屏幕阅读器解析，还能提升代码可维护性。
状态管理机制
通过布尔属性 open 控制默认展开状态，当用户点击 <summary> 元素时，浏览器自动切换 <details> 的显示状态。这种原生交互无需编写事件监听代码，显著降低开发复杂度。
无障碍支持
浏览器会自动为交互元素添加 ARIA 属性（如 aria-expanded），确保折叠状态变化能被辅助技术正确识别。开发者仅需保证 <summary> 内容具有明确语义即可。

二、基础语法与使用规范

1. 标签组合规则

<details>
  <summary>点击展开详细信息</summary>
  <p>这里是可折叠的内容区域，可以包含任意HTML元素...</p>
</details>

必须元素：每个 <details> 必须包含且仅包含一个 <summary> 作为首个子元素
内容限制：除 <summary> 外的所有内容均属于折叠区域，支持嵌套其他语义化标签
默认状态：未设置 open 属性时，内容区域默认隐藏（display: none）

2. 状态控制方法

属性	类型	作用
`open`	布尔属性	设置后内容区域默认展开
`disabled`	非标准属性（部分浏览器支持）	禁用交互（需谨慎使用）

<!-- 默认展开的配置面板 -->
<details open>
  <summary>高级设置</summary>
  <label>
    <input type="checkbox"> 启用暗黑模式
  </label>
</details>

三、典型应用场景

1. FAQ 问答模块

<details>
  <summary>Q1: 如何重置密码？</summary>
  <p>A1: 在登录页面点击"忘记密码"，通过注册邮箱接收重置链接...</p>
</details>

优势：每个问题独立折叠，用户可快速定位目标内容，减少页面滚动量

2. 代码演示区块

<details>
  <summary>查看完整配置示例</summary>
  <pre><code>
server {
    listen 80;
    server_name example.com;
    location / {
        proxy_pass http://backend;
    }
}
  </code></pre>
</details>

优势：保持页面简洁的同时提供完整代码查看能力，特别适合技术文档场景

3. 多级折叠菜单

<details>
  <summary>系统设置</summary>
  <details>
    <summary>网络配置</summary>
    <label>IP地址: <input type="text"></label>
  </details>
  <details>
    <summary>安全选项</summary>
    <label>防火墙: <select><option>启用</option></select></label>
  </details>
</details>

优势：支持无限层级嵌套，可构建复杂配置面板

四、样式定制与交互增强

1. 默认样式覆盖

/* 移除浏览器默认箭头 */
details > summary {
  list-style: none;
}
details > summary::-webkit-details-marker {
  display: none;
}
/* 自定义展开指示器 */
details > summary::before {
  content: "▶";
  margin-right: 0.5em;
  transition: transform 0.2s;
}
details[open] > summary::before {
  transform: rotate(90deg);
}

2. 动画效果增强

details > *:not(summary) {
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.3s ease-out;
}
details[open] > *:not(summary) {
  max-height: 1000px; /* 足够大的值容纳内容 */
}

3. 焦点管理最佳实践

// 确保键盘导航可用（虽然原生支持，但可增强体验）
document.querySelectorAll('details').forEach(detail => {
  detail.addEventListener('keydown', (e) => {
    if (e.key === 'Enter' || e.key === ' ') {
      e.preventDefault();
      detail.open = !detail.open;
    }
  });
});

五、开发注意事项

SEO 优化
确保 <summary> 包含核心关键词，折叠内容虽默认隐藏但仍会被搜索引擎抓取
移动端适配
测试不同触摸目标大小，建议 <summary> 最小高度为 44px 以符合触控标准
性能考量
避免在折叠区域内放置过多复杂组件（如大型表格），防止展开时引发重排卡顿
浏览器兼容性
现代浏览器均支持该标签，如需兼容 IE 需使用 polyfill（如 details-element-polyfill）
无障碍验证
使用 WAVE 或 axe 等工具检查折叠状态的 ARIA 属性是否正确暴露

六、进阶应用技巧

1. 动态内容加载

<details>
  <summary>查看更多数据</summary>
  <div id="dynamic-content">加载中...</div>
</details>
<script>
  document.querySelector('details').addEventListener('toggle', (e) => {
    if (e.target.open && !document.getElementById('dynamic-content').innerHTML.includes('实际数据')) {
      fetch('/api/data').then(res => res.text()).then(html => {
        document.getElementById('dynamic-content').innerHTML = html;
      });
    }
  });
</script>

2. 与表单元素联动

<details>
  <summary>显示高级选项 <input type="checkbox" id="show-advanced"></summary>
  <div class="advanced-options" hidden>
    <!-- 高级配置字段 -->
  </div>
</details>
<script>
  document.getElementById('show-advanced').addEventListener('change', (e) => {
    e.target.closest('details').open = e.target.checked;
    document.querySelector('.advanced-options').hidden = !e.target.checked;
  });
</script>

通过系统掌握 <details> 标签的完整特性集，开发者能够构建出既符合 Web 标准又具有良好用户体验的交互组件。这种原生解决方案在减少代码量的同时，还能获得更好的性能表现和跨浏览器一致性，特别适合在内容管理系统、在线教育平台等需要大量信息折叠的场景中应用。

HTML5 `` 标签详解：实现原生交互式内容折叠