jQuery と CSS を使用してヘッダーのクリックでテーブル行の表示を切り替える方法

ヘッダーのクリックでテーブルの行を展開および折りたたむ

この記事では、対応するヘッダー列が

提供された HTML テーブルは、ヘッダー セクションが交互に配置された行で構成されます。望ましい動作を実現するために、jQuery の能力を活用します。

jQuery アプローチ

1. ヘッダー要素の特定: .header クラスを使用して、どの要素であるかを決定します。テーブルの行はヘッダーとして機能します。
2. 表示/非表示の切り替え: ヘッダーをクリックすると、nextUntil メソッドを使用して、次のヘッダーが見つかるまでそのヘッダーに続くすべての行を選択します。次に、slideToggle メソッドは、選択した行を展開または折りたたみます。

コード スニペット

<code class="javascript">$('.header').click(function(){
    $(this).nextUntil('tr.header').slideToggle(1000);
});</code>

CSS と疑似要素を使用した代替アプローチ

1. CSS ルール: :after プロパティを使用して、展開/折りたたみ記号 (または -) を表す疑似要素を定義します。
2. Toggle CSS クラス: 'expand を割り当てます。 ' クリックされたヘッダーにクラスを追加し、擬似要素の状態に基づいてその表示を切り替えます。

コード スニペット

<code class="css">.header .sign:after{
  content:"+";
  display:inline-block;      
}
.header.expand .sign:after{
  content:"-";
}</code>

<code class="javascript">$(this).toggleClass('expand').nextUntil('tr.header').slideToggle(100);</code>

これ代替アプローチでは、複数の CSS クラスを追跡する必要がなくなり、実装が簡素化されます。

以上がjQuery と CSS を使用してヘッダーのクリックでテーブル行の表示を切り替える方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。