PHP小码农

Appearance

details 与 summary 折叠 ​

<details> 和 <summary> 元素用于创建可展开/收起的内容区域（手风琴组件），无需 JavaScript 即可实现原生折叠交互。<details> 是容器元素，<summary> 是显示在 <details> 中的可见摘要/标题。

前置知识

阅读本节前，建议先了解：div 通用容器

基础概念 ​

什么是 details 和 summary ​

<details> 元素创建一个可折叠的信息部件，用户点击可以展开或收起其中的内容。<summary> 元素定义了 <details> 的可见标题/摘要。

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>details 与 summary 示例</title>
</head>
<body>
  <details>
    <summary>点击展开查看更多信息</summary>
    <p>这是隐藏的详细内容，点击 summary 可以展开或收起。</p>
  </details>
</body>
</html>

核心特性 ​

特性说明
无需 JavaScript原生支持展开/收起
语义化标签表示可展开的补充信息
open 属性控制默认展开/收起状态
无障碍友好键盘可操作，屏幕阅读器可识别
可样式化通过 CSS 自定义外观

语法与使用 ​

基本语法 ​

html
<!-- 默认收起 -->
<details>
  <summary>标题</summary>
  <p>详细内容...</p>
</details>

<!-- 默认展开 -->
<details open>
  <summary>标题</summary>
  <p>详细内容...</p>
</details>

open 属性 ​

open 属性控制 <details> 的展开状态：

html
<!-- 收起状态（默认） -->
<details>
  <summary>常见问题</summary>
  <p>这里是答案...</p>
</details>

<!-- 展开状态 -->
<details open>
  <summary>重要通知</summary>
  <p>这条通知默认展开显示。</p>
</details>

通过 JavaScript 操作 open 属性：

javascript
const details = document.querySelector('details');

// 展开详情
details.open = true;

// 收起详情
details.open = false;

// 切换状态
details.open = !details.open;

// 监听状态变化
details.addEventListener('toggle', (event) => {
  console.log('展开状态:', details.open);
});

details 的内容模型 ​

html
<details>
  <!-- summary 必须是 details 的第一个子元素 -->
  <summary>可见的标题</summary>

  <!-- 可以包含任何流内容 -->
  <p>段落文本</p>
  <ul>
    <li>列表项</li>
  </ul>
  <div>...</div>

  <!-- 可以嵌套 details -->
  <details>
    <summary>嵌套的详情</summary>
    <p>嵌套内容...</p>
  </details>
</details>

详细说明 ​

FAQ 页面示例 ​

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>FAQ - details 示例</title>
  <style>
    * { margin: 0; padding: 0; box-sizing: border-box; }
    body { font-family: -apple-system, sans-serif; color: #333; background: #f5f5f5; }

    .page-header { background: #1e293b; color: #fff; padding: 2rem; text-align: center; }
    .page-header h1 { font-size: 2rem; margin-bottom: 0.5rem; }
    .page-header p { opacity: 0.8; }

    main { max-width: 800px; margin: 2rem auto; padding: 0 2rem; }

    .faq-list details {
      background: #fff; margin-bottom: 0.75rem; border-radius: 8px;
      box-shadow: 0 1px 3px rgba(0,0,0,0.08); overflow: hidden;
      transition: box-shadow 0.2s;
    }

    .faq-list details[open] {
      box-shadow: 0 4px 12px rgba(0,0,0,0.12);
    }

    /* summary 样式 */
    .faq-list summary {
      padding: 1.25rem 1.5rem; cursor: pointer;
      font-weight: 600; font-size: 1rem;
      display: flex; align-items: center; justify-content: space-between;
      user-select: none; transition: background 0.2s;
    }

    .faq-list summary:hover {
      background: #f8fafc;
    }

    /* 自定义展开指示器 */
    .faq-list summary::after {
      content: '+';
      font-size: 1.25rem; color: #64748b;
      transition: transform 0.3s;
    }

    .faq-list details[open] summary::after {
      content: '\2212'; /* 减号 */
    }

    /* details 内容样式 */
    .faq-list .faq-content {
      padding: 0 1.5rem 1.25rem; line-height: 1.7; color: #475569;
    }

    .faq-list .faq-content code {
      background: #f1f5f9; padding: 0.15rem 0.4rem;
      border-radius: 3px; font-size: 0.9em;
    }

    /* 分类标题 */
    .faq-category {
      font-size: 1.1rem; font-weight: 600; color: #1e293b;
      margin: 2rem 0 1rem; padding-left: 0.5rem;
      border-left: 3px solid #3b82f6;
    }
  </style>
</head>
<body>
  <header class="page-header">
    <h1>常见问题</h1>
    <p>找到你需要的答案</p>
  </header>

  <main>
    <div class="faq-list">
      <h2 class="faq-category">账户相关</h2>

      <details>
        <summary>如何注册账户？</summary>
        <div class="faq-content">
          <p>点击页面右上角的"注册"按钮，填写邮箱和密码即可完成注册。注册成功后，我们会向您的邮箱发送一封验证邮件。</p>
        </div>
      </details>

      <details>
        <summary>忘记密码怎么办？</summary>
        <div class="faq-content">
          <p>在登录页面点击"忘记密码"，输入注册邮箱，我们会发送密码重置链接到您的邮箱。链接有效期为 24 小时。</p>
        </div>
      </details>

      <details>
        <summary>如何修改个人信息？</summary>
        <div class="faq-content">
          <p>登录后，进入"账户设置" > "个人信息"，即可修改昵称、头像、联系方式等信息。</p>
        </div>
      </details>

      <h2 class="faq-category">产品使用</h2>

      <details>
        <summary>支持哪些浏览器？</summary>
        <div class="faq-content">
          <p>我们支持最新版本的 Chrome、Firefox、Safari 和 Edge 浏览器。建议使用 Chrome 或 Firefox 获得最佳体验。</p>
        </div>
      </details>

      <details open>
        <summary>如何升级到专业版？</summary>
        <div class="faq-content">
          <p>登录后进入"账户设置" > "订阅管理"，选择专业版方案，完成支付后即可立即升级。支持支付宝、微信支付和信用卡。</p>
        </div>
      </details>

      <h2 class="faq-category">技术支持</h2>

      <details>
        <summary>遇到 Bug 如何反馈？</summary>
        <div class="faq-content">
          <p>您可以通过以下方式反馈 Bug：</p>
          <ul style="margin:0.5rem 0 0 1.5rem">
            <li>发送邮件到 <code>support@example.com</code></li>
            <li>在 GitHub 上提交 Issue</li>
            <li>使用页面右下角的反馈按钮</li>
          </ul>
        </div>
      </details>
    </div>
  </main>
</body>
</html>

嵌套 details ​

html
<details>
  <summary>第一章：HTML 基础</summary>
  <p>HTML 是超文本标记语言...</p>

  <!-- 嵌套的 details -->
  <details>
    <summary>1.1 什么是 HTML</summary>
    <p>HTML 是 Web 的基础语言...</p>
  </details>

  <details>
    <summary>1.2 HTML 标签语法</summary>
    <p>HTML 标签由尖括号包围...</p>
  </details>
</details>

样式定制 ​

css
/* 隐藏默认三角形 */
details summary {
  list-style: none;
}
details summary::-webkit-details-marker {
  display: none;
}

/* 自定义展开动画 */
details .content {
  animation: slideDown 0.3s ease-out;
}

@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

实战示例 ​

产品特性展示 ​

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>产品特性 - details 示例</title>
  <style>
    * { margin: 0; padding: 0; box-sizing: border-box; }
    body { font-family: -apple-system, sans-serif; background: #0f172a; color: #e2e8f0; }

    .hero { text-align: center; padding: 4rem 2rem 2rem; }
    .hero h1 { font-size: 2.5rem; margin-bottom: 1rem; background: linear-gradient(135deg, #60a5fa, #a78bfa); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
    .hero p { max-width: 600px; margin: 0 auto; color: #94a3b8; }

    main { max-width: 700px; margin: 2rem auto; padding: 0 2rem; }

    .feature-details {
      border: 1px solid #334155; border-radius: 8px;
      margin-bottom: 0.75rem; overflow: hidden;
      transition: border-color 0.3s;
    }

    .feature-details[open] {
      border-color: #3b82f6;
    }

    .feature-details summary {
      padding: 1rem 1.25rem; cursor: pointer;
      font-weight: 500; display: flex;
      align-items: center; gap: 0.75rem;
      list-style: none;
    }

    .feature-details summary::-webkit-details-marker { display: none; }

    .feature-details summary::before {
      content: '\25B6'; /* 右三角 */
      color: #3b82f6; font-size: 0.75rem;
      transition: transform 0.3s;
    }

    .feature-details[open] summary::before {
      transform: rotate(90deg);
    }

    .feature-details summary .icon { font-size: 1.5rem; }

    .feature-content {
      padding: 0 1.25rem 1.25rem; padding-left: 3.25rem;
      color: #94a3b8; line-height: 1.7;
    }

    .feature-content ul { margin: 0.5rem 0 0 1.5rem; }
    .feature-content li { margin-bottom: 0.5rem; }
  </style>
</head>
<body>
  <section class="hero">
    <h1>产品特性</h1>
    <p>了解我们产品的每一项强大功能</p>
  </section>

  <main>
    <details class="feature-details">
      <summary><span class="icon">&#9889;</span> 高性能引擎</summary>
      <div class="feature-content">
        <p>采用最新的 V8 引擎优化技术，确保应用在处理大量数据时依然保持流畅。</p>
        <ul>
          <li>首屏加载时间 &lt; 1 秒</li>
          <li>支持百万级数据渲染</li>
          <li>智能内存管理</li>
        </ul>
      </div>
    </details>

    <details class="feature-details">
      <summary><span class="icon">&#128274;</span> 企业级安全</summary>
      <div class="feature-content">
        <p>多层安全防护体系，确保数据安全无忧。</p>
        <ul>
          <li>端到端数据加密</li>
          <li>SOC 2 Type II 认证</li>
          <li>细粒度权限管理</li>
        </ul>
      </div>
    </details>

    <details class="feature-details" open>
      <summary><span class="icon">&#128640;</span> 快速部署</summary>
      <div class="feature-content">
        <p>一键部署到全球 CDN 节点，自动扩缩容。</p>
        <ul>
          <li>支持 Docker 和 Kubernetes</li>
          <li>全球 50+ 边缘节点</li>
          <li>自动故障转移</li>
        </ul>
      </div>
    </details>

    <details class="feature-details">
      <summary><span class="icon">&#128736;</span> 丰富的集成</summary>
      <div class="feature-content">
        <p>与主流工具和服务无缝集成。</p>
        <ul>
          <li>GitHub、GitLab 集成</li>
          <li>Slack、飞书通知</li>
          <li>CI/CD 流水线支持</li>
        </ul>
      </div>
    </details>
  </main>
</body>
</html>

注意事项 ​

浏览器兼容性 ​

<details> 和 <summary> 在现代浏览器中广泛支持：

浏览器支持版本
Chrome12+
Firefox49+
Safari6+
Edge79+

注意：旧版 Edge（EdgeHTML）和 IE 不支持 <details>。

常见问题 ​

  1. 无法自定义展开/收起动画：<details> 原生不支持动画过渡，需要 JavaScript 辅助
  2. summary 样式不一致：不同浏览器的默认三角形样式不同
  3. 无法从外部控制动画：展开/收起是瞬间完成的

最佳实践 ​

  1. 始终使用 summary：details 内必须有 summary 子元素
  2. 提供有意义的摘要：summary 文本应简洁描述内容
  3. 使用 open 属性突出重要内容：关键信息默认展开
  4. 自定义默认三角形样式：保持视觉一致性
  5. 添加键盘支持：确保 Tab 和 Enter/Space 可以操作

下一节

继续学习：dialog 对话框

参考链接 ​