Pure 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 ルールは、.span3 要素と .span2 要素のフォーカス状態に基づいて .alert 要素の表示プロパティを設定します。

「Hide Me」リンク (.span3) がフォーカスを受け取り、その兄弟である .alert 要素が非表示になります。逆に、「Show Me」リンク (.span2) がフォーカスを受け取ると、その兄弟である .alert 要素が表示されます。これにより、意図したとおり、対応するリンクがクリックされた場合にのみコンテンツが非表示または表示されることが保証されます。

以上がPure CSS を使用して折りたたみ可能なコンテンツ リストを作成する方法: ページ上の任意の場所をクリックしたときにコンテンツが非表示にならないようにするにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。