最小限の CSS で複数の折りたたみ可能な Div を作成するには?-CSSチュートリアル-php.cn

最小限の CSS で複数の折りたたみ可能な Div を作成するには?

Barbara Streisand

リリース： 2024-10-30 04:39:02

オリジナル

828 人が閲覧しました

How to Create Multiple Collapsible Divs with Minimal CSS?

純粋な CSS Div の折りたたみと展開

最小限の CSS で複数の折りたたみ可能な Div をカスタマイズする

当面の問題は、過剰なセレクターで CSS コードを肥大化させることなく、単一ページ上に複数の折りたたみ可能な div を配置できます。この場合、提供されるコードは :target 疑似クラスを利用しますが、質問ごとに一意のセレクターが必要です。

解決策:

を採用します。 <詳細>タグ

より効率的なアプローチは、HTML5

を実装することです。 <詳細>タグ。これらのタグは、折りたたみ可能および展開可能なコンテンツ要素を作成するために特別に設計されています。

<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 ベースのブラウザでは最良の結果が得られます。他のブラウザでは、デフォルトですべての折りたたみ可能なコンテンツが表示される場合がありますが、元のコードで説明されているように、非表示/表示メソッドを使用するフォールバックオプションを検討できます。

以上が最小限の CSS で複数の折りたたみ可能な Div を作成するには?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。