如何用最少的 CSS 創建多個可折疊的 Div？-css教學-PHP中文網

如何用最少的 CSS 創建多個可折疊的 Div？

Barbara Streisand

發布： 2024-10-30 04:39:02

原創

829 人瀏覽過

How to Create Multiple Collapsible Divs with Minimal CSS?

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