首頁 > web前端 > css教學 > 主體

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

Mary-Kate Olsen
發布: 2024-10-30 07:25:18
原創
332 人瀏覽過

How to Create Multiple Collapsible Divs in Pure CSS Without Extensive Code?

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

來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!