HTML と CSS のみで Div の表示を切り替えるにはどうすればよいですか?

HTML と CSS を使用したクリック時の Div 表示の切り替え

この記事では、次の課題に対する解決策を提供することを目的としています。などの JavaScript ライブラリに依存せずに、HTML および CSS テクニックを使用して、クリック時に div を表示および非表示にします。 jQuery.

HTML5 要素の使用

HTML5 タグ detail と summary を活用すると、折りたたみ可能な div を実現できます追加のスタイルやスクリプトを必要とせずに機能します。これらのタグは、折りたたみ可能なセクションを作成するためのネイティブ サポートを提供します:

<details><br> <summary>Collapse 1</summary><br> <p>Content 1...</p>
<br></details><br><details><br> <summary>折りたたむ 2</summary><br> <p>コンテンツ2...</p>
<br></details><br>

スタイリング用の追加 CSS

上記のアプローチは折りたたみ可能な動作を処理しますが、視覚的な外観を改善したい場合があります。ディビジョンCSS スニペットの例を次に示します。

details {<br> border: 1px Solid #ccc;<br> margin-top: 10px;<br> padding: 10px;<br>}<br>概要 {<br> 背景: #eee;<br> カーソル: pointer;<br> パディング: 5px;<br> 表示: block;<br>}<br>summary:hover {<br> 背景: #ccc;<br>}<br>

これらのテクニックを実装すると、jQuery や CSS を使用せずに、HTML と CSS で折りたたみ可能なセクションを効果的に作成できます。他の JavaScript ライブラリ。

以上がHTML と CSS のみで Div の表示を切り替えるにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。