如何使用 HTML5 `` 和 `` 建立可折疊 Div？

「如何使用HTML 和CSS 建立可折疊div」

可折疊div 通常用於在網頁上呈現動態且有組織的內容。通常，這些 div 包含標題和隱藏正文，可以在使用者互動時展開和折疊。僅使用 CSS 建立可折疊 div 非常方便，尤其是對於維護乾淨且簡單的程式碼庫。

:target 偽類

涉及CSS 可折疊div 的早期方法利用:target 偽類，當特定元素通過目標屬性（例如）連結時啟動樣式。然而，這種技術需要對多個可折疊元素進行大量重複，從而導致 CSS 程式碼臃腫。

HTML5

和標籤

另一個優雅的解決方案在於 HTML5

和標籤。 元素表示可切換的標題，而

表示可切換的標題。元素封裝了可折疊的內容。這種方法消除了對自訂 JavaScript 或複雜 CSS 的需求，顯著簡化了建立可折疊 div 的過程。

範例程式碼

這裡有一個範例來示範< 的用法;詳情>和：

<code class="html"><details>
  <summary>This is the collapsible header</summary>
  <div class="content">This is the collapsible body</div>
</details></code>

瀏覽器相容性

而和標籤提供了方便的解決方案，必須考慮瀏覽器相容性。現代瀏覽器支援它們，包括 Chrome、Firefox 和 Safari；然而，並非所有瀏覽器都可以以相同的行為呈現它。

為了獲得廣泛的瀏覽器支持，如有必要，您可以使用像

details-polyfill 這樣的 polyfill。

以上是如何使用 HTML5 `` 和 `` 建立可折疊 Div？的詳細內容。更多資訊請關注PHP中文網其他相關文章！