ホームページ > ウェブフロントエンド > CSSチュートリアル > Pure CSS を使用して折りたたみ可能なコンテンツ リストを作成する方法: ページ上の任意の場所をクリックしたときにコンテンツが非表示にならないようにするにはどうすればよいですか?

Pure CSS を使用して折りたたみ可能なコンテンツ リストを作成する方法: ページ上の任意の場所をクリックしたときにコンテンツが非表示にならないようにするにはどうすればよいですか?

DDD
リリース: 2024-11-01 18:01:30
オリジナル
340 人が閲覧しました

How to Create a Collapsible Content List with Pure CSS: How do you prevent content from hiding when you click anywhere on the page?

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 サイトの他の関連記事を参照してください。

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート