“如何使用 HTML 和 CSS 创建可折叠 div”
可折叠 div 通常用于在网页上呈现动态且有组织的内容。通常,这些 div 包含标题和隐藏正文,可以在用户交互时展开和折叠。仅使用 CSS 创建可折叠 div 非常方便,尤其是对于维护干净且简单的代码库而言。
:target 伪类
涉及 CSS 可折叠 div 的早期方法利用 :target 伪类,当特定元素通过目标属性(例如 )链接时激活样式。然而,这种技术需要对多个可折叠元素进行大量重复,从而导致 CSS 代码臃肿。
HTML5
另一种优雅的解决方案在于 HTML5
示例代码
这里有一个示例来演示 < 的用法;详情>和<摘要>:
<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中文网其他相关文章!