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

Linda Hamilton

发布： 2024-12-06 15:02:12

原创

975 人浏览过

How Can I Create Collapsible DIVs with Pure HTML and CSS?

使用 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中文网其他相关文章！

来源：php.cn

本站声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

作者最新文章