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

纯 CSS 可折叠 Div 解决方案

在此查询中，用户寻求有关创建纯 CSS 可折叠 div 的指导，类似于中的示例提供的jsfiddle。然而，他们的目标是最小化 CSS 代码，并避免为多个问题-答案对编写大量选择器。

与基于 :target 伪类的原始方法不同，此查询引入了

。和<细节> HTML 标签。这些标签专为创建可折叠内容而设计。

使用

和

• :
  定义展开 div 之前最初可见的摘要文本。
• :
  包含在单击摘要之前隐藏的可折叠内容。

示例：

<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 的浏览器（例如 Chrome 和 Safari）为此功能提供了最佳支持。其他浏览器可能会表现出默认行为，例如显示所有可折叠内容。

后备方法

对于不完全支持

的浏览器和<细节>标签，可以考虑使用 CSS 的后备方法。这涉及使用 :target 伪类和 display 属性的组合来切换可折叠内容的可见性。

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