首页  >  文章  >  web前端  >  如何在没有大量代码的情况下用纯 CSS 创建多个可折叠 Div?

如何在没有大量代码的情况下用纯 CSS 创建多个可折叠 Div?

Mary-Kate Olsen
Mary-Kate Olsen原创
2024-10-30 07:25:18325浏览

How to Create Multiple Collapsible Divs in Pure CSS Without Extensive Code?

纯 CSS 可折叠 Div:最小化多个元素的代码

问题:

在纯 CSS 中,如何创建多个可折叠的 div 元素,而无需为每个元素编写大量代码?

上下文:

提供的代码使用 :target 伪类来折叠和展开单个 div。然而,创建大量相似的 div 元素需要大量的 CSS。

解决方案:

另一种方法是利用

和<详细> HTML 标签,专门为此功能设计。

详细信息:

  • :包含展开详细信息之前出现的文本。
  • :包含最初隐藏的详细内容。

通过嵌套这些标签,您可以轻松创建可扩展的部分,无需任何 CSS:

<code class="html"><details>
  <summary>This is what you want to show before expanding</summary>
  <p>This is where you put the details that are shown once expanded</p>
</details></code>

浏览器支持:

浏览器支持各不相同。 Webkit(例如 Safari、Chrome)提供最佳结果。在其他浏览器中,可能始终会显示详细信息。

后备:

如果

和<详细>不支持标签,请考虑使用隐藏/显示方法和广泛的 CSS 选择器。

以上是如何在没有大量代码的情况下用纯 CSS 创建多个可折叠 Div?的详细内容。更多信息请关注PHP中文网其他相关文章!

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