如何在沒有大量程式碼的情況下用純 CSS 建立多個可折疊 Div？

純CSS 可折疊Div：最小化多個元素的代碼

問題：

在純CSS 中，如何建立多個可折疊的div 元素，而無需為每個元素編寫大量程式碼？

上下文：

提供的程式碼使用 :target 偽類來折疊和展開單一 div。然而，創建大量相似的 div 元素需要大量的 CSS。

解決方案：

另一種方法是利用

和 HTML 標籤，專門為此功能設計。

詳細資料：

• ：包含展開詳細資訊之前出現的文字。
• ：包含原本隱藏的詳細內容。

透過巢狀這些標籤，您可以輕鬆建立可擴充的部分，無需任何CSS：

<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（例如 Safari、Chrome）提供最佳結果。在其他瀏覽器中，可能始終會顯示詳細資訊。

後備：

如果

和不支援標籤，請考慮使用隱藏/顯示方法和廣泛的 CSS 選擇器。

以上是如何在沒有大量程式碼的情況下用純 CSS 建立多個可折疊 Div？的詳細內容。更多資訊請關注PHP中文網其他相關文章！