如何使用純 CSS 建立可折疊內容清單：當您按一下頁面上的任意位置時，如何防止內容隱藏？

用CSS 無縫隱藏和顯示內容

為了用純CSS 實現可折疊的內容列表，我們遇到了一個挑戰：只需單擊頁面上的任意位置即可隱藏內容頁。這偏離了僅在單擊“隱藏”連結時隱藏內容的預期行為。

CSS 解

解決方案在於利用 :focus 和 ~ 選擇器。修改後的CSS 代碼：

<code class="css">body {
  display: block;
}
.span3:focus ~ .alert {
  display: none;
}
.span2:focus ~ .alert {
  display: block;
}
.alert {
  display: none;
}</code>

HTML 標記

<code class="html"><span class="span3">Hide Me</span>
<span class="span2">Show Me</span>
<p class="alert">Some alarming information here</p></code>

了解解決方案

1. 焦點狀態： :focus選擇器定位已獲得焦點的元素（例如，單擊時）。
2. 同級選擇器 (~)： ~ 選擇器匹配作為所選元素的同級元素的元素。
3. 條件顯示： CSS 規則依據 .sp​​an3 和 .span2 元素的焦點狀態設定 .alert 元素的顯示屬性。

當「隱藏我」連結 (.span3) 獲得焦點，其同級元素 .alert 元素變為隱藏。相反，當「Show Me」連結 (.span2) 獲得焦點時，其同級元素 .alert 元素變得可見。這可確保僅在單擊相應的連結時才按預期隱藏或顯示內容。

以上是如何使用純 CSS 建立可折疊內容清單：當您按一下頁面上的任意位置時，如何防止內容隱藏？的詳細內容。更多資訊請關注PHP中文網其他相關文章！