jquery toggleClassメソッド

TOPページに戻る > jquery入門

jquery toggleClass()メソッド

toggleClassメソッドは、指定した要素にclassを追加、削除するメソッドです
class属性があれば削除し、なければ追加します
引数に追加するクラス名を指定します
引数に何も指定されなければ指定したセレクタの中で最初に出てくるクラス名を追加、削除します
第二引数にスイッチを指定できます。trueかfalse
スイッチがtrueの場合、強制的にクラスを追加します
スイッチがfalseの場合、強制的にクラスを削除します

追加するクラス名を指定する

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

スイッチ

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

指定なし（セレクタで指定したページで最初に出てくる要素のclassを追加/削除）

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

スイッチのみ

$("セレクタ").toggleClass(true/false)

functionとスイッチ

$("セレクタ").toggleClass(function(index, class, switch),true/false)

指定したHTML要素のcssのtoggleClassプロパティの値を取得します

指定した要素をクリックしたときに、クリックした要素のfooクラスを追加/削除します

jquery

$(function() {
	$("#hoge").click(function(){
	 $(this).toggleClass("foo");
	});
});

css

#hoge {
 width: 300px ;
 height: 300px ;
 cursor: pointer;
 background-color: #F90;
 }

.foo{
 border:solid 3px blue;
 }

html

<div id="hoge">
</div>

サンプル