如何使用 HTML5 `` 和 `` 创建可折叠 Div？

“如何使用 HTML 和 CSS 创建可折叠 div”

可折叠 div 通常用于在网页上呈现动态且有组织的内容。通常，这些 div 包含标题和隐藏正文，可以在用户交互时展开和折叠。仅使用 CSS 创建可折叠 div 非常方便，尤其是对于维护干净且简单的代码库而言。

:target 伪类

涉及 CSS 可折叠 div 的早期方法利用 :target 伪类，当特定元素通过目标属性（例如 ）链接时激活样式。然而，这种技术需要对多个可折叠元素进行大量重复，从而导致 CSS 代码臃肿。

HTML5

和<摘要>标签

另一种优雅的解决方案在于 HTML5

和<摘要>标签。 <总结>元素表示可切换的标题，而

表示可切换的标题。元素封装了可折叠的内容。这种方法消除了对自定义 JavaScript 或复杂 CSS 的需求，显着简化了创建可折叠 div 的过程。

示例代码

这里有一个示例来演示 < 的用法;详情>和<摘要>：

<code class="html"><details>
  <summary>This is the collapsible header</summary>
  <div class="content">This is the collapsible body</div>
</details></code>

浏览器兼容性

而<详细信息>和<摘要>标签提供了方便的解决方案，必须考虑浏览器兼容性。现代浏览器支持它们，包括 Chrome、Firefox 和 Safari；然而，并非所有浏览器都可以以相同的行为呈现它。

为了获得广泛的浏览器支持，如有必要，您可以使用像 details-polyfill 这样的 polyfill。

以上是如何使用 HTML5 `` 和 `` 创建可折叠 Div？的详细内容。更多信息请关注PHP中文网其他相关文章！