ホームページ > 記事 > ウェブフロントエンド > Pure CSS を使用して折りたたみ可能なコンテンツ リストを作成する方法: ページ上の任意の場所をクリックしたときにコンテンツが非表示にならないようにするにはどうすればよいですか?
純粋な CSS を使用して折りたたみ可能なコンテンツ リストを実現するには、課題に直面します。コンテンツは、コンテンツの任意の場所をクリックするだけで非表示にできます。ページ。これは、「非表示」リンクをクリックした場合にのみコンテンツを非表示にするという望ましい動作から逸脱しています。
解決策は、:focus セレクターと ~ セレクターを活用することにあります。改訂された CSS コード:
<code class="css">body { display: block; } .span3:focus ~ .alert { display: none; } .span2:focus ~ .alert { display: block; } .alert { display: none; }</code>
<code class="html"><span class="span3">Hide Me</span> <span class="span2">Show Me</span> <p class="alert">Some alarming information here</p></code>
「Hide Me」リンク (.span3) がフォーカスを受け取り、その兄弟である .alert 要素が非表示になります。逆に、「Show Me」リンク (.span2) がフォーカスを受け取ると、その兄弟である .alert 要素が表示されます。これにより、意図したとおり、対応するリンクがクリックされた場合にのみコンテンツが非表示または表示されることが保証されます。
以上がPure CSS を使用して折りたたみ可能なコンテンツ リストを作成する方法: ページ上の任意の場所をクリックしたときにコンテンツが非表示にならないようにするにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。