と を使用して純粋な CSS で折りたたみ可能な Div を作成する方法

純粋な CSS 折りたたみ可能 Div ソリューション

このクエリでは、ユーザーは、次の例と同様に、純粋な CSS 折りたたみ可能 div を作成するためのガイダンスを求めます。提供された jsfiddle。ただし、CSS コードを最小限に抑え、複数の質問と回答のペアに対して多数のセレクターを作成しないようにすることを目的としています。

:target 疑似クラスに基づく元のアプローチとは異なり、このクエリでは

が導入されています。 <詳細> HTMLタグ。これらのタグは、折りたたみ可能なコンテンツの作成専用に設計されています。

の使用

• : div を展開する前に最初に表示される概要テキストを定義します。
• : 概要をクリックするまで非表示になる折りたたみ可能なコンテンツを囲みます。

例:

<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>

ブラウザのサポート

のブラウザ サポート<詳細>タグは色々あります。 Chrome や Safari などの Webkit ベースのブラウザは、この機能に対する最適なサポートを提供します。他のブラウザは、すべての折りたたみ可能なコンテンツを表示するなど、デフォルトの動作を示す場合があります。

フォールバック メソッド

を完全にサポートしていないブラウザの場合。 <詳細>タグを使用した場合には、CSS を使用した代替方法が考えられます。これには、:target 疑似クラスと表示プロパティの組み合わせを使用して、折りたたみ可能なコンテンツの表示/非表示を切り替えることが含まれます。

以上がと を使用して純粋な CSS で折りたたみ可能な Div を作成する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。