指定したclassのオン(設定)、オフ(削除)の切り替えを行います。

• .toggleClass( name ) 1.0追加
• .toggleClass( name, switch ) 1.3追加
• .toggleClass( [switch] ) 1.4追加
• .toggleClass( function ) 1.4追加

.toggleClass( name ) 1.0追加

戻り値:jQuery

指定したclassの追加・削除の切り替えを行います。空白区切りで複数指定可能です。

引数	説明
name	指定したclassの追加・削除の切り替えを行います。空白区切りで複数指定可能です。

最初にこのようなタグがあった場合、

<div class="tumble">Some text.</div>

javaScriptで次の処理を行うと、

$('div.tumble').toggleClass('bounce');

結果はこのようになります。

<div class="tumble bounce">Some text.</div>

次に下記のような処理を行うと

$('div.tumble').toggleClass('bounce');

結果は次のようになります。

<div class="tumble">Some text.</div>

.toggleClass( name, switch ) 1.3追加

戻り値:jQuery

指定したclass名をswitch値がtrueなら追加、falseなら削除します。

引数	説明
name	指定したclassの追加・削除の切り替えを行います。空白区切りで複数指定可能です。
switch	trueが指定されれば追加を、falseが指定されれば削除を行います。

.toggleClass( [switch] ) 1.4追加

戻り値:jQuery

switch値により、class名の追加・削除の切り替えを制御します。

引数	説明
[swicth]	jQuery1.4から引数が何も指定されなければ、最初に対象要素に指定されている全てのclass名を対象にするようになりました。 Boolean値(swicth)を第一引数に指定して、trueなら追加を、falseなら削除を行うように指定することが出来ます。

.toggleClass( function ) 1.4追加

戻り値:jQuery

関数の戻り値となるclass名の追加・削除の切り替えを行います。

引数	説明
function(index, class, switch)	切り替え対象となるclass名を返す関数を指定します。 関数で取得できる3つの引数は、下記のとおりです。 index 要素の番号 class 変更前のclass名 switch switchの値を取得します。
[swicth]	trueなら追加を、falseなら削除を行うように指定することが出来ます。

$('div.foo').toggleClass(function() {
  if ($(this).parent().is('.bar')) {
      //対象の親要素が.bar(barクラスに属している)なら、
      //'happy'クラスを切り替え
      return 'happy';
  } else {
      //上記の条件に該当しなければ、'sad'クラスを切り替え
      return 'sad';
  }
});

 Back to top