指定したクラス名を付けたり消したりできるjQueryの.toggleClass。正確には.toggleClassで指定したクラス名が無ければ追加、あれば削除するという動きを持っています。
イメージ的にはONとOFFを切り替える電気のスイッチのような感じですかね。

スポンサーリンク

toggleClassの使い方

下部のサンプルページを用いて説明をすると…
サンプルページのjQueryはこのようにしています。

jQuery

$("div").click(function () {
  $(this).toggleClass("bg_red");
});

まず、クリックでアクションを起こしたい場所を指定(1行目:divを指定)
次に、指定した場所をクリックしたときの動作内容のクラス名を指定(2行目:bg_red)
あとは、.toggleClassがクラス名を見て、付いていなければ追加、付いていたら削除。を行ってくれます。

サンプルページを表示

html

<div>クリックすると色が変わります</div>
css

div {
	background-color: #E5E5E5;
	border-radius: 3px;
	margin: 50px auto 0;
	width: 60%;
	height: 80px;
	line-height: 80px;
	text-align: center;
	cursor: pointer;
}

.bg_red {
	background-color: #EE8D8D;
}

余談ですが、指定したクラス名を付ける.addClass()、指定したクラス名を削除する.removeClass()もあります。
今回は色の変化でサンプルを作りましたが、世の中ではサイトメニューの開閉に.toggleClassが頻繁に使われてる気がしました。
なので、そのうちアコーディオンメニューを作って置いておこうと思います。

PAGE TOP