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