如何构建仅 HTML 的手风琴 — 无需 JavaScript！

如果你最近一直在看我的 Twitch 直播，你就会知道我正在重建、重新设计和重塑whitep4nth3r.com 的完整体验——而且我正尝试使用尽可能少的 JavaScript来实现。在为新的博客页面布局构建目录时，我发现了一种无需 JavaScript 就能用四行代码构建手风琴折叠面板的方法！快来一起看看吧！

使用 HTML 详细信息元素

要构建 HTML 折叠面板的标记，请使用<details>元素。使用<summary>标签为折叠面板提供标题。添加内容，就大功告成了！

<details>
  <summary>Section title</summary>
  <p>Here is the content!</p>
</details>

默认加载打开的手风琴

默认情况下，<details>元素加载时处于关闭状态，而我始终希望在页面加载时不向读者隐藏内容。我们可以通过在元素中添加 open 属性来默认打开折叠面板<details>。完美！

<details open>
  <summary>Title</summary>
  <p>Here is the content that is open by default!</p>
</details>

如果读者愿意，他们可以点击关闭折叠面板以尽量减少混乱——尤其是在移动设备上。

浏览器支持和可访问性

在撰写本文时，据 caniuse.com 报道，除了 Internet Explorer（显然！）和 Opera 之外，其他现代浏览器都完全支持详细信息元素。

我还确认该<details>元素在 Chromium、Firefox 和 Safari 中可以通过键盘访问。按 Tab 键切换到该元素，然后使用空格键或 Enter 键打开或关闭。

进一步阅读

如果您感兴趣，可以查看创建完整目录的源代码。在 MDN 上了解有关详细信息元素的更多信息，并享受使用 HTML 构建的乐趣！