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

使用最少代码的纯 CSS 折叠/展开 Div

使用 :target 伪类提供的 CSS 可折叠 div 可用于创建页面无需大量 CSS 即可高效地使用多个可折叠部分。具体方法如下：

利用 :target 伪类，您可以建立一个系统，为每个问题分配一个唯一的 ID，例如“#q1”、“#q2”等。当点击相应的“ ”按钮时，将触发 ID 的目标元素显示，从而显示关联的答案 div。

CSS 代码：

<code class="css">.FAQ {
    vertical-align: top;
    height: auto !important;
}
.list {
    display: none;
    height: auto;
    margin: 0;
    float: left;
}
.show {
    display: none;
}
#wrapper > .hide:target + .show {
    display: inline;
}
#wrapper > .hide:target {
    display: none;
}
#wrapper > .hide:target ~ .list {
    display: inline;
}</code>

中在此代码中，#wrapper 用于对所有问题-答案对进行分组，确保 :target 效果仅限于该特定部分。如果您想修改整个页面，请将其删除。

用法示例：

<code class="html"><div id="wrapper">
    <a href="#q1" class="hide" id="hide1">+</a>
    <a href="#q1show" class="show" id="show1"> -</a>
    <div class="question"> Question 1? </div>
    <div class="list">
        <p> Answer 1 </p>
    </div>
</div></code>

对每个问题重复此模式，确保每组元素都有唯一的 ID 。因此，您可以使用最少的 CSS 代码创建多个可折叠部分。

浏览器支持：

请注意，此解决方案仅依赖于 CSS3，可能不受 CSS3 支持。较旧的浏览器。此外，使用 :target 可能会导致具有许多可折叠部分的页面出现性能问题。

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