とを使用して純粋な CSS で折りたたみ可能な Div を作成する方法-CSSチュートリアル-php.cn

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

Barbara Streisand

リリース： 2024-11-01 00:49:02

オリジナル

911 人が閲覧しました

How to Create a Collapsible Div with Pure CSS using and ?

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

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

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