如何用最少的 CSS 创建多个可折叠的 Div？

纯 CSS 折叠和展开 Div

使用最少的 CSS 自定义多个可折叠 Div

当前的问题是创建单个页面上有多个可折叠 div，而不会因过多的选择器而使 CSS 代码变得臃肿。在本例中，提供的代码使用 :target 伪类，但每个问题都需要一个唯一的选择器。

解决方案：拥抱

和<细节>标签

更有效的方法是实现 HTML5

和<细节>标签。这些标签专门用于创建可折叠和可展开的内容元素。

<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 的浏览器提供最佳结果。其他浏览器可能默认显示所有可折叠内容，但您可以考虑使用原始代码中所述的隐藏/显示方法作为后备选项。

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