使用最少程式碼的純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中文網其他相關文章！
