0Pricing
HTML Academy · 课时

details 和 summary：披露组件

无需 JavaScript 即可构建原生展开和折叠组件

details 和 summary：披露组件 是 CoddyKit 上的免费 HTML Academy 课时。 这是第 3 节课，共 4 节。 你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。 这是 HTML Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 HTML Academy 课程共包含 4 节课。

什么是 details 和摘要

<details> 和 <summary> 元素可以创建原生的展开控件——一种无需使用 JavaScript 的展开/折叠组件：

<details>
  <summary>What is HTML?</summary>
  <p>HTML (HyperText Markup Language) is the standard markup language
     used to create web pages.</p>
</details>

工作原理

交互行为：

  • 默认情况下，只有 <summary> 可见
  • 点击摘要会切换其余内容的可见性
  • 摘要默认会显示一个展开三角形
  • 无需使用 JavaScript

open 属性

open 属性会预先展开 details 元素：

<details open>
  <summary>Installation instructions</summary>
  <ol>
    <li>Download the installer</li>
    <li>Run the installer</li>
    <li>Restart your computer</li>
  </ol>
</details>
<!-- open is a boolean attribute: presence = expanded -->
<!-- Remove it to start collapsed -->

构建常见问题

常见问题分区非常适合使用这种元素：

<h2>Frequently Asked Questions</h2>

<details>
  <summary>Is HTML5 a programming language?</summary>
  <p>No. HTML5 is a markup language that defines the structure and meaning
     of web content. Programming languages like JavaScript add logic and behavior.</p>
</details>

<details>
  <summary>Do I need to close void elements?</summary>
  <p>In HTML5, void elements like &lt;img&gt; and &lt;br&gt; do not require
     a closing slash. Both &lt;br&gt; and &lt;br /&gt; are valid.</p>
</details>

设置 details 和摘要的样式

自定义外观：

details {
  border: 1px solid #e2e8f0;
  border-radius: 0.5rem;
  padding: 0.75rem 1rem;
  margin-bottom: 0.5rem;
}

summary {
  font-weight: 600;
  cursor: pointer;
  list-style: none;   /* remove default triangle */
}

summary::before {
  content: '▶ ';      /* custom arrow */
}

details[open] > summary::before {
  content: '▼ ';      /* rotate when open */
}

移除默认三角形

展开三角形通过 list-style 应用：

/* Remove the default arrow: */
summary {
  list-style: none;
}

/* Firefox: */
summary::-webkit-details-marker {
  display: none;
}

/* Then add a custom indicator: */
summary::after {
  content: '+';
  float: right;
}
details[open] summary::after {
  content: '−';
}

切换事件

监听打开或关闭操作的 toggle 事件：

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

details.addEventListener('toggle', () => {
  if (details.open) {
    console.log('Details opened');
    // Track analytics, load content, etc.
  } else {
    console.log('Details closed');
  }
});

使用 details 创建手风琴

构建一个基本的手风琴组件——同一时间只展开一个面板：

/* Pure CSS accordion using details: */
/* Each item is a details element */
/* For exclusive open, use JavaScript: */

const allDetails = document.querySelectorAll('details');
allDetails.forEach(d => {
  d.addEventListener('toggle', () => {
    if (d.open) {
      allDetails.forEach(other => {
        if (other !== d) other.removeAttribute('open');
      });
    }
  });
});

details/summary 的无障碍支持

内置的无障碍功能：

  • 摘要可以获得键盘焦点，并可使用 Enter 或空格键激活
  • 屏幕阅读器会读出摘要文本和展开状态
  • 隐藏内容仍然存在于 DOM 中，但在展开前会被宣布为隐藏

用于独占式手风琴的 name 属性

HTML 2025 为 details 添加了 name，以支持原生独占式手风琴：

<details name="faq">
  <summary>Question 1</summary>
  <p>Answer 1...</p>
</details>

<details name="faq">
  <summary>Question 2</summary>
  <p>Answer 2...</p>
</details>
<!-- details with the same name act as a group -->
<!-- Opening one closes the others automatically -->
<!-- Supported in Chrome 120+ and Firefox 130+ -->

使用 toggle 延迟加载内容

仅在 details 打开时加载内容：

<details id="advanced">
  <summary>Load advanced settings...</summary>
  <div id="advanced-content">Loading...</div>
</details>

<script>
const d = document.getElementById('advanced');
d.addEventListener('toggle', async () => {
  if (d.open) {
    const res = await fetch('/api/settings');
    const html = await res.text();
    document.getElementById('advanced-content').innerHTML = html;
    d.removeEventListener('toggle', arguments.callee);
  }
}, { once: true });
</script>

快速检查

在 details 展开控件中，哪个元素提供始终可见的触发文本？

回顾：详细信息与总结

披露组件要点：

  • <details> + <summary> — 原生展开/折叠，无需 JavaScript
  • open 属性 — 预先展开
  • 切换事件 — 对打开/关闭做出响应
  • 使用 CSS 设置样式；将列表样式设为 none 以移除默认三角形
  • name 属性 — 排他式手风琴组件（Chrome 120 及以上）

常见问题解答

「details 和 summary：披露组件」课时是免费的吗？

是的 — 「details 和 summary：披露组件」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 HTML Academy 课程的其余内容，请升级到 CoddyKit PRO。 HTML Academy 课程共包含 4 节课。

「details 和 summary：披露组件」这节课中我会学到什么？

无需 JavaScript 即可构建原生展开和折叠组件 你通过在浏览器中直接运行的动手代码来练习 HTML Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 HTML Academy 需要有经验吗？

无需任何先前经验。CoddyKit 上的 HTML Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。 这是第 3 节课，共 4 节。

「details 和 summary：披露组件」课时需要多长时间？

大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。

我能在这节 HTML Academy 课中编写并运行代码吗？

能。每节 HTML Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。

此课程中的所有课时

  1. aside：补充内容
  2. 重新认识 figure 和 figcaption
  3. details 和 summary：披露组件
  4. progress 和 meter 元素
← 返回 HTML Academy