<summary>-细节摘要

<summary> 标签是 HTML5 中用于定义 <details> 元素的摘要或标题的标签。它通常与 <details> 配合使用，为用户提供一个可点击的控件来展开或折叠内容。这种组合非常适合实现常见的“折叠面板”或“手风琴”效果。

<summary> 的基本用法

<summary> 必须作为 <details> 的第一个子元素出现。以下是一个最简单的例子：

<details>
  <summary>点击查看详情</summary>
  <p>这里是隐藏的详细内容，当用户点击摘要时会显示出来。</p>
</details>

在这个例子中，浏览器会默认渲染一个三角形图标（▶或▼）来表示折叠状态。点击 <summary> 时，<details> 的内容会展开或收起。

默认行为和样式

不同浏览器对 <details> 和 <summary> 的默认样式略有差异。可以通过 CSS 统一外观：

details {
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 0.5em;
  margin-bottom: 1em;
}

summary {
  cursor: pointer;
  font-weight: bold;
  outline: none; /* 移除焦点轮廓 */
}

/* 隐藏默认三角图标 */
summary::-webkit-details-marker {
  display: none;
}

/* 自定义三角图标 */
summary::before {
  content: "▶";
  margin-right: 0.5em;
}

details[open] summary::before {
  content: "▼";
}

高级交互示例

结合 JavaScript 可以实现更复杂的交互。例如，创建一个多选的手风琴菜单：

<div class="accordion">
  <details>
    <summary>Section 1</summary>
    <div class="content">
      <p>Content for section 1...</p>
    </div>
  </details>
  <details>
    <summary>Section 2</summary>
    <div class="content">
      <p>Content for section 2...</p>
    </div>
  </details>
</div>

<script>
  document.querySelectorAll('details').forEach(detail => {
    detail.addEventListener('toggle', () => {
      if (detail.open) {
        console.log(`展开: ${detail.querySelector('summary').textContent}`);
      }
    });
  });
</script>

无障碍访问考虑

为确保无障碍访问，需要注意：

1. 始终为 <summary> 提供有意义的文本
2. 如果完全自定义样式，确保提供视觉状态反馈
3. 可以通过 ARIA 属性增强语义：

<details aria-expanded="false">
  <summary role="button" aria-controls="content1">说明</summary>
  <div id="content1">
    <p>辅助技术可以识别这些状态</p>
  </div>
</details>

实际应用场景

常见问题解答(FAQ)

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

代码展示/隐藏

<details>
  <summary>显示JavaScript示例代码</summary>
  <pre><code class="language-javascript">
function toggleDetails(detail) {
  detail.open = !detail.open;
}
  </code></pre>
</details>

移动端优化

在移动设备上，可以通过调整触摸目标大小来改善体验：

summary {
  min-height: 44px; /* 推荐的最小触摸目标尺寸 */
  display: flex;
  align-items: center;
}

浏览器兼容性说明

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

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

对于旧版浏览器，可以使用以下 polyfill：

// 检测是否支持details元素
if (!('open' in document.createElement('details'))) {
  // 加载polyfill
  document.write('<script src="https://cdn.jsdelivr.net/npm/details-polyfill"><\/script>');
}

性能优化建议

当页面中包含大量 <details> 元素时：

1. 延迟加载隐藏内容
2. 使用CSS will-change属性优化动画性能
3. 避免在details内部放置复杂布局

<details>
  <summary>大数据表格</summary>
  <div data-src="large-table.html" class="lazy-content">
    <!-- 内容将通过AJAX延迟加载 -->
  </div>
</details>

<script>
  document.querySelectorAll('.lazy-content').forEach(el => {
    const observer = new IntersectionObserver((entries) => {
      entries.forEach(entry => {
        if (entry.isIntersecting) {
          fetch(el.dataset.src)
            .then(response => response.text())
            .then(html => {
              el.innerHTML = html;
              observer.unobserve(el);
            });
        }
      });
    });
    observer.observe(el);
  });
</script>

与JavaScript框架集成

在Vue/React等框架中使用时，需要注意：

Vue示例

<template>
  <details v-for="item in items" :key="item.id">
    <summary>{{ item.title }}</summary>
    <div v-html="item.content"></div>
  </details>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { id: 1, title: '项目1', content: '<p>详情1</p>' },
        { id: 2, title: '项目2', content: '<p>详情2</p>' }
      ]
    }
  }
}
</script>

React示例

function Accordion({ items }) {
  return (
    <div>
      {items.map(item => (
        <details key={item.id}>
          <summary>{item.title}</summary>
          <div dangerouslySetInnerHTML={{ __html: item.content }} />
        </details>
      ))}
    </div>
  );
}

样式定制技巧

完全自定义展开/折叠动画：

details {
  overflow: hidden;
  transition: height 0.3s ease;
}

/* 初始状态 */
details:not([open]) {
  height: 3em; /* 仅summary高度 */
}

details[open] {
  height: auto;
  max-height: 500px; /* 防止过度展开 */
}

summary {
  position: relative;
  padding-right: 2em;
}

summary::after {
  content: "+";
  position: absolute;
  right: 1em;
  transition: transform 0.3s;
}

details[open] summary::after {
  transform: rotate(45deg);
}

嵌套结构实现

可以创建多级折叠菜单：

<details>
  <summary>一级菜单</summary>
  <details>
    <summary>二级菜单</summary>
    <details>
      <summary>三级菜单</summary>
      <p>最终内容</p>
    </details>
  </details>
</details>

对应的CSS可以添加缩进以显示层级关系：

details details {
  margin-left: 1.5em;
}

表单控件集成

将 <details> 与表单元素结合使用：

<details>
  <summary>高级选项</summary>
  <form>
    <fieldset>
      <legend>配置选项</legend>
      <label><input type="checkbox"> 选项1</label>
      <label><input type="checkbox"> 选项2</label>
    </fieldset>
  </form>
</details>

打印样式优化

确保打印时所有内容都可见：

@media print {
  details[open] {
    display: block !important;
  }
  
  details:not([open]) {
    display: none !important;
  }
}