複雑なコードを使わずに純粋な CSS で複数の折りたたみ可能な Div を作成するにはどうすればよいですか?-CSSチュートリアル-php.cn

複雑なコードを使わずに純粋な CSS で複数の折りたたみ可能な Div を作成するにはどうすればよいですか?

Mary-Kate Olsen

リリース： 2024-10-30 07:25:18

オリジナル

395 人が閲覧しました

How to Create Multiple Collapsible Divs in Pure CSS Without Extensive Code?

純粋な CSS の折りたたみ可能な Div: 複数の要素のコードの最小化

質問:

純粋な CSS では、どのように作成できますか要素ごとに広範なコードを記述せずに、複数の折りたたみ可能な div 要素を使用できますか?

コンテキスト:

提供されたコードでは、:target 疑似クラスを使用して、単一の div を折りたたみおよび展開します。ただし、同様の div 要素を多数作成する必要があるため、大量の CSS が必要になります。

解決策:

別のアプローチは、

を利用することです。 <詳細>この機能用に特別に設計された HTML タグ。

詳細:

: 詳細を展開する前に表示されるテキストが含まれます。
: 最初は非表示になっている詳細なコンテンツを囲みます。

これらのタグをネストすると、CSS を使用せずに展開可能なセクションを簡単に作成できます:

<code class="html"><details>
  <summary>This is what you want to show before expanding</summary>
  <p>This is where you put the details that are shown once expanded</p>
</details></code>

ログイン後にコピー

ブラウザのサポート:

ブラウザのサポートは異なります。 Webkit (例: Safari、Chrome) が最良の結果を提供します。他のブラウザでは、詳細が常に表示される場合があります。

フォールバック:

<詳細>タグはサポートされていません。広範な CSS セレクターを備えた非表示/表示メソッドの使用を検討してください。

以上が複雑なコードを使わずに純粋な CSS で複数の折りたたみ可能な Div を作成するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。