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

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