如何使用最少的 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中文網其他相關文章！