メソッド toggleClass

メソッド toggleClass は CSS クラスの追加と削除を切り替えます：クラスがなければ追加し、あれば削除します。

構文

単一の CSS クラス：

javascript$(セレクタ).toggleClass(クラス名);

第二引数が true または false の値を受け取り、それに応じて CSS クラスを追加または削除のみする場合：

javascript$(セレクタ).toggleClass(CSSクラス名, 状態);

複数の CSS クラス：

javascript$(セレクタ).toggleClass(['クラス1', 'クラス2', 'クラス3', '...']);

第二引数に応じて CSS クラスを追加または削除のみする場合：

javascript$(セレクタ).toggleClass(['クラス1', 'クラス2', 'クラス3', '...'], 状態');

セット内の各要素に関数を適用する場合。 状態は true または false であり、メソッドに対して CSS クラスを追加のみ、または削除のみするよう指示します：

javascript$(セレクタ).toggleClass(function(セット内の番号, 要素の現在のクラス, 状態), [状態]);

例

私たちの段落にはすでに2つのクラスがあります。 さらに www クラスを追加してみましょう：

html<p id="test" class="eee ggg">テキスト</p>

javascript$('#test').toggleClass('www');

HTML コードは次のようになります：

html<p id="test" class="eee ggg www">テキスト</p>

例

今度は www クラスが要素にすでにあります - 削除してみましょう：

html<p id="test" class="eee ggg www">テキスト</p>

javascript$('#test').toggleClass('www');

HTML コードは次のようになります：

html<p id="test" class="eee ggg">テキスト</p>

関連項目