在本文中,我們的目標是提供一個解決方案來應對以下挑戰:使用HTML 和CSS 技術在點擊時顯示和隱藏div,而不依賴JavaScript 庫,例如jQuery.
利用 HTML5 標籤 detail 和 summary,您可以實現可折疊 div無需額外的樣式或腳本即可實現功能。這些標籤為建立可折疊部分提供本機支援:
<details><br> <summary>Collapse 1</summary><br> <p>Content 1...</p> <br>詳細資料><br><br> 折疊2摘要><br> <p>內容2...</p> <br></details><br>
同時上述方法處理可折疊行為,您可能想要增強div 的視覺外觀。以下是一個 CSS 程式碼片段範例:
details {<br> border: 1pxsolid #ccc;<br> margin-top: 10px;<br> padding: 10px;<br>;<br>摘要{<br>背景:#eee;<br>遊標:指標;<br> 填充:5px;<br> 顯示:區塊;<br>}<br>摘要:懸停{<br> 背景:# ccc;<br>}<br>
透過實作這些技術,您可以有效地在 HTML 和 CSS 中建立可折疊部分,而不需要 jQuery 或其他 JavaScript圖書館。
以上是如何僅使用 HTML 和 CSS 切換 Div 可見性?的詳細內容。更多資訊請關注PHP中文網其他相關文章!