如何使用纯 HTML 和 CSS 创建可折叠 DIV？

使用 HTML、CSS 的可折叠 DIV

正在寻找一种不依赖 jQuery 创建可隐藏和可折叠 DIV 元素的方法？这个问题经常出现在移动网站设计中，特别是当离线访问至关重要时。使用纯HTML和CSS，可以实现此功能。

解决方案：

使用HTML5的

和<摘要>标签是一个可行的解决方案：

<details>
  <summary>Collapse 1</summary>
  <p>Content 1...</p>
</details>
<details>
  <summary>Collapse 2</summary>
  <p>Content 2...</p>
</details>

这种方法利用 HTML5 的本机功能，无需额外的 JavaScript 或 CSS 样式。 <详细>标签代表一个可折叠容器，而

代表一个可折叠容器。标签定义其交互标头。单击<摘要>标签切换

中内容的可见性。标签。

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