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

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