jQueryのtoggleClass()を使ってみる

要素にclassの追加・削除を行えるtoggleClass()の使い方を調べてみました。

サンプルコード

引数にclass名を入れてみます。

HTML

<button id="btn">クリック</button>

CSS

.is-active {
	color: #ff0000;
}

JavaScript

$(function() {
	$('#btn').on('click', function() {
		$(this).toggleClass('is-active');
	});
});

対象の要素に指定したclass名が無ければ追加、あれば削除されます。
第一引数を指定した場合のデモページ
　

半角スペースでclass名を区切ることで、複数のclass名も指定できます。

CSS

.is-active {
	color: #ff0000;
}
.is-current {
	font-size: 24px;
}

JavaScript

$(function() {
	$('#btn').on('click', function() {
		$(this).toggleClass('is-active is-current');
	});
});

第一引数を複数指定した場合のデモページ
　

引数を指定しない場合、対象の要素に設定されている全てのclass名がtoggleClass()の対象になります。

HTML

<button id="btn" class="hoge fuga foo bar">クリック</button>

JavaScript

$(function() {
	$('#btn').on('click', function() {
		$(this).toggleClass();
	});
});

引数を指定しない場合のデモページ
　

第二引数には真偽値が入り、trueの場合はclassの追加、falseの場合はclassの削除を行います。

JavaScript

$(function() {
	$(window).on('resize', function() {
		$('body').toggleClass('sp', $(this).width() < 640);
	});
});

第二引数を指定した場合のデモページ
　

【参考サイト】

• toggleClass(class, switch) – jQuery 日本語リファレンス
• jQuery リファレンス：toggleClass