jQuery｢toggleClass｣で指定のクラスを切り替える方法

2020年5月10日

jQueryのメソッド「.toggleClass()」は、指定のクラスを切り替える事ができるメソッド。

今回は、jQueryで「指定のクラスを付けたり消したりできる」メソッド「.toggleClass()」について、その使い方をサンプルを交えて解説しよう。

.toggleClass()の機能とは？

toggleClassの機能

.toggleClass()は、要素に「指定のクラスがあれば削除して、無ければ付ける」事ができるメソッド。つまり、指定のクラスをON/OFFできるメソッドである。

例えば$("p").toggleClass("test");とした場合、pタグにtestクラスがあれば、削除し、無ければtestを付与する。

jQuery反映前

<p class="test">こんにちわ</p>

jQuery反映後

<p class>こんにちわ</p>

さらに同じメソッド反映後

<p class="test">こんにちわ</p>

.toggleClass()の構文

要素の「指定のクラスのON/OFFを切り替える」構文

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

要素に「現在付いている全てのクラスのON/OFFを切り替える」構文（※指定要素にクラスがついていない場合は無効）

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

要素に「複数のクラスを付けたり、消したり」する構文

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

複数のクラスのON/OFFを切り替える場合は.toggleClass("クラス名A クラス名B");のように「半角スペース」を空けて、複数のクラス名を指定すれば良い。この場合、１度に複数のクラスが付いたり消えたりする挙動となる。

要素の第２引数に真偽値（true/false）を入れる構文

$("セレクタ").toggleClass("クラス名" ,"true or false");

trueの場合はクラスが付与され、falseの場合はクラスが削除される。（trueは「addClass」とfalseは「removeClass」と同じ機能になるが、工夫次第で使えるかもしれない）

要素の第２引数に「条件式」を入れる構文

$("セレクタ").toggleClass("クラス名" ,"条件式");

この場合、条件式の結果が「true」の場合はクラスが付与され、条件式の結果が「false」の場合はクラスが削除される。

toggleClassの使い所

.toggleClass()は、クラスをON/OFFできる機能なので、WEB上の「見た目のON/OFFを切り替えるもの」に利用できる。

例えば、「ボタンをクリックする度にONの色に変わり、もう一度押したらOFFの色に戻りを繰り返す」ボタンなどが、簡単な例といえるので見ていこう。

jQuery

$(function(){
  $("button").on("click",function(){
     $(this).toggleClass("on");
  });
});

HTML （jQuery反映前）

<button>ボタン</button>

HTML （１回目クリック後）

<button class="on">ボタン</button>

HTML （２回目クリック後）

<button class>ボタン</button>

あとは、クラスonにCSSで色などをつければ完了だ。

jQueryで.toggleClass()で複数のクラスを切り替える例

jQuery

$(function(){
  $("button").on("click",function(){
     $("#nav").toggleClass("on open");
  });
});

HTML （jQuery反映前）

<button>ボタン</button>
<ul id="nav">
 <li>ナビ</li>
 <li>ナビ</li>
</ul>

HTML （１回目クリック後）

<button>ボタン</button>
<ul id="nav" class="on open">
 <li>ナビ</li>
 <li>ナビ</li>
</ul>

HTML （２回目クリック後）

<button>ボタン</button>
<ul id="nav" class>
 <li>ナビ</li>
 <li>ナビ</li>
</ul>

このように書く事で$("#nav")に"on open"の２つのクラスのON/OFFの切り替えが実装できる。

クラスの切り替えに「条件文を利用」する例

.toggleClass()で「条件文」を利用する例として、「ブラウザのウインドウサイズを取得して、768px未満ならspクラスを付けて、768px以上ならspクラスを削除する」例を見ていこう。

jQuery

$(function(){
  $(window).on('load resize', function() {
        $("#nav").toggleClass("sp", $(window).width() < 768);
  });
});

HTML （jQuery反映前）

<ul id="nav">
 <li>メニュー1</li>
 <li>メニュー2</li>
</ul>

HTML （jQuery反映後：768px未満）

<ul id="nav" class="sp">
 <li>メニュー1</li>
 <li>メニュー2</li>
</ul>

HTML （jQuery反映後：768px以上）

<ul id="nav" class>
 <li>メニュー1</li>
 <li>メニュー2</li>
</ul>

この例で使われている

$(window).on('load resize', function() {　〜　});

というイベントは、ウインドウの「ロード時」と「ブラウザウインドウのりサイズ時」の２つのイベントを同時に取る書き方で、WEBサイトを表示した時とブラウザをリサイズする時に毎回発生するイベントであり、「ブラウザの幅」によって何か処理をする時によく使う方法なので、覚えておこう！

ここでは.toggleClass("sp", $(window).width() < 768);と書かれており、条件文として$(window).width()はウインドウのサイズを取得する記述で、ウインドウサイズをリサイズする度にウインドウサイズを取得して、768pxより大きいか小さいかを判断することになる。

この場合、768pxより小さければspクラスが付き、768pxよりも大きければspクラスが削除される仕組みだ。

フロントエンドスキルをもっと早く・簡単にマスターしたい方へ！

JavaScriptやCSS・Sassなどフロントエンド学習は、初心者が「独学」で完全マスターするには半年以上かかり、相当根気よくやらないと挫折してしまうか、ライバルに出遅れてしまう…。

短期間でフロントエンド・WEBデザインをマスターするには？

私の経験だが、手軽なオンラインスクールを利用した方が圧倒的に早かった。独学だと「何からどこまで勉強すれば良いかわからない」ものを、これだけ学習すればOKというポイントをおさえた教科書で学習しながら、わからない点を質問し放題なので、多少の出費は必要だが２ヶ月程度でサクッと学べたので逆に経済的だった！（実際に私がオンラインスクールを受講して体感）

では「オススメはどのスクール？」とよく聞かれるのだが、たった１つのおすすめスクールがある訳でなく、その人によって最適なスクールが違う。

スクール選びのポイント