72. details summary 与 dialog

本节目标：学会用原生 HTML 实现折叠面板和对话框，无需写一行 JavaScript。

HTML5 提供了两个交互式组件：折叠面板和对话框。纯 HTML 就能用。

details + summary：折叠面板

<details> 创建一个可以展开/收起的内容块。 <summary> 是它的可见标题。

<details>
  <summary>什么是 HTML5？</summary>
  <p>HTML5 是 HTML 的第五个主要版本。现在它已演变为 Living Standard。</p>
</details>

默认状态是收起，只显示”什么是 HTML5？“。点一下展开，再点一下收起。

默认展开

<details open>
  <summary>常见问题</summary>
  <p>这里是最常见的问题解答...</p>
</details>

加 open 属性，页面加载时就是展开状态。

多个折叠面板

<details>
  <summary>问题一：如何学习前端？</summary>
  <p>从 HTML、CSS、JavaScript 基础开始...</p>
</details>

<details>
  <summary>问题二：推荐什么教材？</summary>
  <p>推荐 MDN 文档和官方教程...</p>
</details>

<details>
  <summary>问题三：多久能学会？</summary>
  <p>基础部分大约需要 1-2 个月...</p>
</details>

一组 FAQ 问答就做好了。

这是最常见的用法——FAQ 页面。原生实现，零 JavaScript。

改变展开图标

默认的三角形可以换：

summary {
  list-style: none;
  cursor: pointer;
}
summary::before {
  content: "▶ ";
}
details[open] summary::before {
  content: "▼ ";
}

dialog：原生对话框

<dialog> 创建模态或非模态对话框。

<dialog id="myDialog">
  <h2>提示</h2>
  <p>这是一段重要提示信息。</p>
  <button onclick="this.parentElement.close()">关闭</button>
</dialog>

<button onclick="document.getElementById('myDialog').showModal()">
  打开对话框
</button>

showModal()：模态对话框（背景变暗，不能操作其他内容）
show()：非模态对话框（可以操作其他内容）
close()：关闭对话框

完整示例

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<style>
  dialog {
    border: none;
    border-radius: 8px;
    padding: 20px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.3);
  }
  dialog::backdrop {
    background: rgba(0, 0, 0, 0.5);
  }
</style>
</head>
<body>
  <dialog id="confirm">
    <h3>确认删除？</h3>
    <p>此操作不可恢复。</p>
    <form method="dialog">
      <button value="cancel">取消</button>
      <button value="confirm">确认</button>
    </form>
  </dialog>

  <button onclick="openDialog()">删除项目</button>

  <script>
    function openDialog() {
      const dialog = document.getElementById('confirm');
      dialog.showModal();
      dialog.addEventListener('close', () => {
        if (dialog.returnValue === 'confirm') {
          console.log('已确认删除');
        }
      });
    }
  </script>
</body>
</html>

::backdrop 伪元素可以自定义对话框背景的样式。

Note

让表单提交时自动关闭对话框，并把 value 传给 returnValue。

两者对比

组件	用途	需要 JS	交互方式
details/summary	折叠面板、FAQ	否	点击标题展开/收起
dialog	弹窗、确认框	是（打开/关闭）	模态/非模态

实际应用场景

details/summary 适合：

FAQ 页面
设置面板（展开看详情）
长文档的章节折叠
表单的高级选项

dialog 适合：

确认操作弹窗
登录/注册弹窗
图片预览大图
表单填写弹窗

完整示例：FAQ 页面

<section>
  <h2>常见问题</h2>

  <details>
    <summary>你们支持退款吗？</summary>
    <p>支持。购买后 7 天内无理由退款。</p>
  </details>

  <details>
    <summary>如何联系客服？</summary>
    <p>发送邮件至 support@example.com，工作时间 24 小时内回复。</p>
  </details>

  <details>
    <summary>支持哪些支付方式？</summary>
    <p>支持支付宝、微信支付、银联卡。</p>
  </details>
</section>

不需要 JavaScript，不需要第三方库。HTML 原生支持。

details 和 dialog 在所有现代浏览器中都支持。IE 不支持，但 IE 已不再被官方支持。