<summary>-细节摘要

<summary> 是 HTML5 中与 <details> 标签配合使用的元素，用于定义一个可点击的摘要或标题，用户通过点击它可以展开或折叠 <details> 中的隐藏内容。这种交互方式非常适合展示可选的详细信息，比如常见问题解答、代码示例或配置说明。

<summary> 的基本用法

<summary> 必须作为 <details> 的第一个子元素使用。默认情况下，<details> 的内容是隐藏的，点击 <summary> 会切换内容的显示状态。以下是一个最简单的例子：

<details>
  <summary>点击查看详细信息</summary>
  <p>这里是隐藏的详细内容，只有在点击摘要后才会显示。</p>
</details>

渲染效果如下：

<details> <summary>点击查看详细信息</summary> <p>这里是隐藏的详细内容，只有在点击摘要后才会显示。</p> </details>

<summary> 的默认样式

浏览器会为 <summary> 添加默认样式，通常包括一个三角形图标（▶或▼）表示展开状态。不同浏览器的默认样式可能略有差异。可以通过 CSS 自定义这个图标：

details summary {
  list-style: none; /* 隐藏默认图标 */
}
details summary::before {
  content: "→ "; /* 自定义图标 */
}

控制默认展开状态

通过 open 属性可以让 <details> 默认展开：

<details open>
  <summary>默认展开的详细信息</summary>
  <p>这些内容在页面加载时就是可见的。</p>
</details>

嵌套使用 <details>

<details> 可以嵌套使用，创建多级折叠内容：

<details>
  <summary>一级菜单</summary>
  <details>
    <summary>二级菜单</summary>
    <p>二级菜单的内容</p>
  </details>
</details>

与 JavaScript 交互

可以通过 JavaScript 监听 toggle 事件来响应展开/折叠状态的变化：

<details id="myDetails">
  <summary>可交互的详细信息</summary>
  <p>状态变化时会触发事件。</p>
</details>

<script>
  document.getElementById('myDetails').addEventListener('toggle', function(event) {
    console.log(this.open ? '展开' : '折叠');
  });
</script>

表单中的应用

<details> 和 <summary> 可以用来组织复杂的表单选项：

<details>
  <summary>高级选项</summary>
  <div>
    <label><input type="checkbox"> 选项1</label>
    <label><input type="checkbox"> 选项2</label>
    <label><input type="checkbox"> 选项3</label>
  </div>
</details>

无障碍访问考虑

为了确保无障碍访问，<summary> 应该提供清晰的文本描述。可以使用 aria-expanded 属性增强可访问性：

<details>
  <summary aria-expanded="false">可访问的摘要</summary>
  <p>屏幕阅读器会正确识别这个可折叠区域。</p>
</details>

自定义样式示例

完全自定义 <details> 和 <summary> 的外观：

<style>
  details {
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 0.5em;
    margin-bottom: 1em;
  }
  summary {
    font-weight: bold;
    cursor: pointer;
    padding: 0.5em;
    background-color: #f8f9fa;
    border-radius: 3px;
  }
  summary:hover {
    background-color: #e9ecef;
  }
</style>

<details>
  <summary>自定义样式的摘要</summary>
  <p>这个折叠区域有完全自定义的外观。</p>
</details>

实际应用场景

1. 常见问题解答(FAQ)部分：

<details>
  <summary>如何重置密码？</summary>
  <ol>
    <li>访问登录页面</li>
    <li>点击"忘记密码"链接</li>
    <li>按照邮件中的指示操作</li>
  </ol>
</details>

2. 代码示例的折叠：

<details>
  <summary>查看JavaScript示例代码</summary>
  <pre><code class="language-javascript">function helloWorld() {
  console.log("Hello, World!");
}</code></pre>
</details>

3. 长篇文章的章节折叠：

<article>
  <h2>长篇文章标题</h2>
  <details>
    <summary>第一章</summary>
    <p>第一章内容...</p>
  </details>
  <details>
    <summary>第二章</summary>
    <p>第二章内容...</p>
  </details>
</article>

浏览器兼容性

大多数现代浏览器都支持 <details> 和 <summary>，包括：

• Chrome 12+
• Firefox 49+
• Safari 6+
• Edge 79+
• Opera 15+

对于不支持这些标签的旧版浏览器，可以使用以下 polyfill：

<script>
  // 简单的polyfill
  if (!('open' in document.createElement('details'))) {
    document.addEventListener('DOMContentLoaded', function() {
      var details = document.querySelectorAll('details');
      details.forEach(function(detail) {
        var summary = detail.querySelector('summary');
        summary.addEventListener('click', function() {
          detail.open = !detail.open;
        });
      });
    });
  }
</script>

性能考虑

大量使用 <details> 元素可能会影响页面性能，特别是在移动设备上。对于包含大量内容的可折叠区域，可以考虑以下优化：

1. 延迟加载隐藏内容
2. 虚拟滚动长列表
3. 避免在折叠区域内嵌套复杂的布局

与其它HTML元素的结合

<summary> 可以与大多数HTML元素一起使用，包括：

<details>
  <summary>
    <h3>带标题的摘要</h3>
    <small>副标题</small>
  </summary>
  <div>
    <img src="example.jpg" alt="示例图片">
    <p>图文混合的内容</p>
  </div>
</details>

动态内容加载

可以通过JavaScript动态加载折叠区域的内容：

<details>
  <summary>点击加载动态内容</summary>
  <div id="dynamic-content"></div>
</details>

<script>
  document.querySelector('details').addEventListener('toggle', function() {
    if (this.open && !this.querySelector('#dynamic-content').innerHTML) {
      fetch('/api/content')
        .then(response => response.text())
        .then(html => {
          this.querySelector('#dynamic-content').innerHTML = html;
        });
    }
  });
</script>

打印时的行为

默认情况下，<details> 的隐藏内容在打印时也会被隐藏。可以通过CSS强制显示：

@media print {
  details {
    display: block !important;
  }
  details > * {
    display: block !important;
  }
}