如何僅使用 CSS 按需顯示和隱藏元素？

使用CSS 按需顯示和隱藏元素

無論瀏覽器設定或裝置限制如何，瀏覽Web 內容都應該是一種輕鬆的體驗。在 JavaScript 不可用的情況下，確保可訪問性至關重要。

考慮一個帶有選單和多個隱藏 div 的場景。使用者的選擇應該會觸發特定 div 的出現。雖然 JavaScript 提供了理想的解決方案，但在停用時它會停止運作。

CSS 來救援

為了克服這個挑戰，CSS 來幫助我們。 「checkbox hack」利用了複選框和多功能 :checked 偽選擇器的強大功能。

工作原理

最初，建立一個複選框和多個 div。此複選框分配了三種樣式：

1. 隱藏：複選框在視覺上隱藏，顯示：無。
2. 未選取：關聯的 div 保持隱藏並顯示：無。
3. 選定：與選取的複選框關聯的div以display：inline-block顯示。

實作

在HTML 中，建立複選框元素和對應的標籤元素，每個標籤與唯一的關聯div.

<input type="checkbox">

在CSS 中，定義複選框和標籤的樣式：

/* Hide checkbox visually */
input[type="checkbox"] {
  display: none;
}

/* Use label for checkbox to provide visual accessibility */
label {
  display: inline-block;
  cursor: pointer;
}

/* Hide divs initially */
div {
  display: none;
}

/* Show div when associated checkbox is checked */
input[type="checkbox"]:checked ~ div {
  display: inline-block;
}

結論

使用此CSS-基於解決方案，即使禁用了JavaScript，div 也可以在點擊時無縫顯示或隱藏，從而確保普遍可存取的使用者體驗。

以上是如何僅使用 CSS 按需顯示和隱藏元素？的詳細內容。更多資訊請關注PHP中文網其他相關文章！