【jQuery】toggleClassでクラスの付け外しをしてCSSを交互に切り替える方法

jQueryでクラスの付け外しってどうやるの？

例えばボタンをクリックするたびに背景色を変えたい要素があるとします。

この場合、クリックイベントのon("click")だけだと変わった色を戻すことができません。

つまり一方通行なので、クリックするたびに進行方向が逆になるようなイメージを実現できるのがtoggleClass()というメソッドになります。

今回はjQueryを使うので、jQueryを使ったことがない人はこちらの記事を参照下さい。

jQueryのtoggleClass()メソッドとは？

toggleClass()とは、指定した要素に指定したクラスがなければそのクラスを付与して、あれば削除するjQueryのメソッドです。

つまり指定したクラスの付け外し(ON / OFF)が出来ます。

例えば以下のコードがあったとします。

<p>じゅんぺいブログ</p>

$("p").toggleClass("text");

この場合、HTMLにはクラスがないので、toggleClass()を反映させたらこうなります。

<p class="text">じゅんぺいブログ</p>

そしてさらに同じtoggleClass()を反映させたら、今度はすでに指定したクラスが付いているので、今度は削除します。

<p>じゅんぺいブログ</p>

このようにクラスを外すだけ、付けるだけではなく、付け外しを交互に繰り返せるのがtoggleClass()です。

jQueryのtoggleClass()でクラスを付け外しCSSを交互に切り替える方法

今回は指定した要素をbuttonにして、ボタンをクリックしたらtoggleClass()を発火させたいと思います。

クリックイベントについては以下の記事を参照下さい。

要素の指定したクラスを付け外す

これは先ほど解説しましたが、ボタンをクリックして指定したクラスが付いていなければクラスを付与、付いていれば削除します。

書き方はこちらです。

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

今回のHTMLはこちら。

<button>ボタン</button>
<div class="red"></div>
<div></div>

1つ目のdivタグにはredというクラスが付いていて、2つ目のdivタグはクラスなしです。

CSSはこちら。

.red {
  background-color: #dc143c; /* 赤色 */
}

redというクラスが付いている要素の背景色を赤色にしています。

なので1つ目のdivタグの背景色は赤色で、2つ目のdivタグは無色となります。

jQueryはこちら。

$(function () {
  // ボタンがクリックされたときの処理
  $("button").on("click", function () {
    // divタグのクラスを切り替える
    $("div").toggleClass("red");
  });
});

ボタンをクリックしたら、divタグに付いているredというクラスの付け外しをします。

つまり1つ目のdivタグからはredを外すので背景色は無色になり、2つ目のdivタグはクラスがないのでredというクラスを付与して背景色が赤色になります。

サンプルはこちら。

See the Pen
Untitled by junpei (@junpei-sugiyama)
on CodePen.

ボタンをクリックするたびに背景色が変わります。

要素のクラスを全て外す→戻す

これは指定した要素がどんなクラスであっても、ボタンをクリックしたらクラスは削除され、もう一回クリックしたらクラスは元に戻ります。

書き方はこちらです。

$("セレクタ").toggleClass();

先ほどと違ってクラス名は指定していません。

今回のHTMLはこちら。

<button>ボタン</button>
<div class="red"></div>
<div class="blue"></div>
<div></div>

divタグの1つ目と2つ目はそれぞれ別のクラスが付いていて、3つ目はクラスなしです。

CSSはこちら。

.red {
  background-color: #dc143c; /* 赤色 */
}
.blue {
  background-color: #4169e1; /* 青色 */
}

1つ目のdivタグの背景色は赤色で、2つ目のdivタグは青色、そして3つ目のdivタグは無色です。

そしてjQueryはこちら。

$(function () {
  // ボタンがクリックされたときの処理
  $("button").on("click", function () {
    // divタグのクラスを切り替える
    $("div").toggleClass();
  });
});

サンプルはこちら。

See the Pen
Untitled by junpei (@junpei-sugiyama)
on CodePen.

ボタンクリックでdivタグ全てのクラスが削除されるので、背景色は全てなくなります。

そしてもう一回クリックするとdivタグ全てのクラスが元に戻るので、背景色も戻ります。

ただし残しておきたいクラスがある場合は、次の方法で書きます。

要素の指定した複数のクラスを付け外す

これはクラス名を複数指定する方法です。

書き方は半角スペースを空けてクラス名を追記するだけです。

書き方はこちらです。

$("セレクタ").toggleClass("クラス名① クラス名②");

今回のHTMLはこちら。

<button>ボタン</button>
<div class="blue border font"></div>

divタグにblue・border・fontという3つのクラスが付いています。

CSSはこちら。

.blue {
  background-color: #87cefa; /* 背景色・青 */
}
.border {
  border-radius: 50%; /* 円 */
}
.font {
  color: #dc143c; /* 文字色・赤 */
}

背景色を青色、形を円、文字色を赤色にしています。

jQueryはこちら。

$(function () {
  // ボタンがクリックされたときの処理
  $("button").on("click", function () {
    // divタグの複数のクラスを切り替える
    $("div").toggleClass("blue border");
  });
});

これはボタンをクリックしたらblueとborderという2つのクラスの付け外しをします。

つまりボタンをクリックすると無色で円が無効になるので、四角になります。

サンプルはこちら。

See the Pen
Untitled by junpei (@junpei-sugiyama)
on CodePen.

.fontに関してはtoggleClassに書いていないので、文字色はそのままとなっています。

条件文を使う方法

ここまではクリックイベントを使ってきましたが、条件文を使うことも可能です。

例えば『画面幅○○px以下の時にクラスを付与する』など。

こちらのコードは『画面幅が600px未満の場合、divタグに.redを付与して、画面幅が600px以上の場合には.redを削除する』となります。

$(function () {
  // 画面のロードとリサイズ時に処理を実行
  $(window).on("load resize", function () {
    // 画面幅が600未満の場合クラス"red"を追加、600px以上の場合は削除
    $("div").toggleClass("red", $(window).width() < 600);
  });
});

そしてHTMLとCSSはこちらです。

<div class="red"></div>

.red {
  background-color: #dc143c; /* 赤色 */
}

divタグに.redというクラスが付いていて、CSSも背景色を設定してあります。

そしてこちらのサンプルではパソコンで見た場合、画面幅は600px以上なので.redは外されて背景色は無色になっています。

See the Pen
Untitled by junpei (@junpei-sugiyama)
on CodePen.

そして左上のHTML・CSS・JSをクリックすると画面幅が600px未満になり、.redが付与されるので背景色が赤色になります。

まとめ

今回はjQueryのtoggleClassを使ってクラスの付け外しをする方法を解説してきました。

これが使えるとハンバーガーメニューやアコーディオンメニューなど、開閉する実装で役に立ちます。

以上になります。

この記事が役に立ったと思ったら、シェアボタンからX（旧Twitter）などにシェアすると、いいねされてフォロワーが増えたりすることがあるよ！

投げ銭で応援する🐶

【jQuery】toggleClassでクラスの付け外しをしてCSSを交互に切り替える方法

【初心者向け】jQueryとは？CDNを使った本体の読み込み方も分かりやすく解説

jQueryのtoggleClass()メソッドとは？

jQueryのtoggleClass()でクラスを付け外しCSSを交互に切り替える方法

【jQuery】クリックイベントのon(click)の使い方をサンプル付きで解説

要素の指定したクラスを付け外す

要素のクラスを全て外す→戻す

要素の指定した複数のクラスを付け外す

条件文を使う方法

まとめ