jQuery属性操作 - toggleClass()メソッド

jQuery効果リファレンスマニュアル

例

すべての<p>要素の"main"クラスを設定および削除するために切り替えます：

$("button").click(function(){
  $("p").toggleClass("main");
});

実際に試してみてください

定義と使用法

toggleClass()は、選択された要素の1つまたは複数のクラスを設定または削除するために切り替えます。

このメソッドは、各要素内で指定されたクラスをチェックします。存在しない場合はクラスを追加し、設定されている場合は削除します。これが切り替え効果です。

ただし、"switch"パラメータを使用することで、クラスの追加または削除のみを指定できます。

構文

$(selector).toggleClass(class,switch)
パラメータ 説明
class

必須。追加または削除する指定された要素を定義します。

複数のクラスを指定する場合は、クラス名をスペースで区切ってください。
switch オプション。ブール値。クラスを追加または削除するかどうかを指定します。

クラスの切り替えに使用する関数

$(selector).toggleClass(function(index,class),switch)

実際に試してみてください

パラメータ 説明
function(index,class)

必須。追加または削除する一つまたは複数のクラス名を指定する関数を定義します。

  • index - オプション。選択子のインデックス位置を受け入れます。
  • class - オプション。現在の選択子のクラスを受け入れます。
switch オプション。ブール値。クラスを追加（true）または削除（false）するかどうかを指定します。

jQuery効果リファレンスマニュアル