メソッド toggleClass
メソッド toggleClass は CSS クラスの追加と削除を切り替えます:クラスがなければ追加し、あれば削除します。
構文
単一の CSS クラス:
$(セレクタ).toggleClass(クラス名);
第二引数が true または false の値を受け取り、それに応じて CSS クラスを追加または削除のみする場合:
$(セレクタ).toggleClass(CSSクラス名, 状態);
複数の CSS クラス:
$(セレクタ).toggleClass(['クラス1', 'クラス2', 'クラス3', '...']);
第二引数に応じて CSS クラスを追加または削除のみする場合:
$(セレクタ).toggleClass(['クラス1', 'クラス2', 'クラス3', '...'], 状態');
セット内の各要素に関数を適用する場合。
状態は true または false であり、メソッドに対して CSS クラスを追加のみ、または削除のみするよう指示します:
$(セレクタ).toggleClass(function(セット内の番号, 要素の現在のクラス, 状態), [状態]);
例
私たちの段落にはすでに2つのクラスがあります。
さらに www クラスを追加してみましょう:
<p id="test" class="eee ggg">テキスト</p>
$('#test').toggleClass('www');
HTML コードは次のようになります:
<p id="test" class="eee ggg www">テキスト</p>
例
今度は www クラスが要素にすでにあります - 削除してみましょう:
<p id="test" class="eee ggg www">テキスト</p>
$('#test').toggleClass('www');
HTML コードは次のようになります:
<p id="test" class="eee ggg">テキスト</p>
関連項目
-
メソッド
addClass,removeClass,hasClass -
JavaScript プロパティ
classList,
これを使用すると、プレーンな JavaScript でクラスの追加/削除を切り替えることができます