jQuery を使用せずに、HTML および CSS で折りたたみ可能なコンテンツを作成できますか?

jQuery を使用せずに HTML と CSS で折りたたみ可能なコンテンツを作成する

多くのデザイナーは、jQuery Mobile のテーマで紹介されているような折りたたみ可能なコンテンツの作成に努めています。ただし、そのような機能に jQuery の使用が必要かどうかは検討する価値があります。この記事では、純粋な HTML と CSS を使用してこれを実現する可能性を検討し、その実現可能性を示すためにいくつかの例を示します。

HTML5 の使用 <概要>タグ

HTML5 では が導入されています。 <概要>この目的のために特別に設計されたタグ。これらのタグには、追加のスタイルやスクリプトは必要ありません。

<details>
  <summary>Collapse 1</summary>
  <p>Content 1...</p>
</details>
<details>
  <summary>Collapse 2</summary>
  <p>Content 2...</p>
</details>

カスタム CSS スタイリングの利用

折りたたみ可能なコンテンツの外観と動作をより詳細に制御するには、カスタム CSS を使用します。

details {
  border: 1px solid black;
  padding: 10px;
}

summary {
  cursor: pointer;
  font-weight: bold;
}

details[open] summary {
  color: green;
}

details[open] p {
  display: block;
}

この例では、ボーダーとパディングは折りたたみ可能なセクションが定義されており、概要の上にマウスを置くとカーソルがポインタに変わります。 open 属性は、概要の色を変更し、コンテンツを表示/非表示にするために使用されます。

追加の例

次の例は、代替アプローチを示しています。

• ラジオ ボタンの使用: 折りたたみ可能なセクションごとに個別のラジオ ボタンを作成すると、より多くの機能が可能になります。 「従来の」折りたたみと展開の動作。
• jQuery を使用しないカスタム JavaScript: インライン JavaScript 関数を使用して折りたたみ可能なセクションの表示/非表示を切り替えると、jQuery が不要になりますが、外部スクリプトが追加されます。
• Vue.js の使用: 軽量の JavaScript フレームワークの活用Vue.js と同様に、状態と反応性を管理するための構造化されたアプローチを提供し、より複雑な折りたたみ可能なコンテンツに適しています。
• 流体タイポグラフィを使用した CSS 日よけ: この手法では、流体タイポグラフィを使用した純粋な CSS を使用して、さまざまな画面サイズに合わせてカスタマイズできる日よけを使用して、折りたたみと展開の効果をシミュレートします。

以上がjQuery を使用せずに、HTML および CSS で折りたたみ可能なコンテンツを作成できますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。