jQuery API の toggleClass( className, switch ) は、switchがtrueであれば、classNameに指定したクラス名を、マッチした要素のクラス属性の値の中に追加し、switchがfalseであれば、classNameに指定したクラス名を、マッチした要素のクラス属性の値の中から削除するメソッド。
引数
- className
クラス名。
- switch
Boolean（ブーリアン・論理型）。
trueであれば、追加する。
falseであれば、削除する。
記述方法
jQuery( セレクター ) . toggleClass( クラス名, スイッチ );
「スイッチ」がtrueであれば、「セレクター」に指定した要素のクラス属性の値の中に、「クラス名」を追加する。
「スイッチ」がfalseであれば、「セレクター」に指定した要素のクラス属性の値の中から、「クラス名」を削除する。
実装例（サンプル）
- 項目１
- 項目２
- 項目３
実装例（サンプル）の動作について
「クラス名を追加」ボタンをクリックすると、すべての項目を赤色にする。
「クラス名を削除」ボタンを再度クリックすると、すべての項目を灰色に戻す。
実装例（サンプル）のソースコード
JavaScript
<script type="text/javascript">
<!--
jQuery( function() {
jQuery( '.jquery-sample-button' ) . click( function() {
var flag = jQuery( this ) . val();
jQuery( '#jquery-sample-ul li' ) . toggleClass( 'jquery-sample-li-red', flag == 'add' );
} );
} );
// -->
</script>
<!--
jQuery( function() {
jQuery( '.jquery-sample-button' ) . click( function() {
var flag = jQuery( this ) . val();
jQuery( '#jquery-sample-ul li' ) . toggleClass( 'jquery-sample-li-red', flag == 'add' );
} );
} );
// -->
</script>
CSS
<style>
<!--
.jquery-sample-li {
color: gray;
}
.jquery-sample-li-red {
color: red;
}
-->
</style>
<!--
.jquery-sample-li {
color: gray;
}
.jquery-sample-li-red {
color: red;
}
-->
</style>
HTML
<p>
<button class="jquery-sample-button" value="add">クラス名を追加</button>
<button class="jquery-sample-button" value="remove">クラス名を削除</button>
</p>
<ul id="jquery-sample-ul">
<li class="jquery-sample-li">項目１</li>
<li class="jquery-sample-li">項目２</li>
<li class="jquery-sample-li">項目３</li>
</ul>
<button class="jquery-sample-button" value="add">クラス名を追加</button>
<button class="jquery-sample-button" value="remove">クラス名を削除</button>
</p>
<ul id="jquery-sample-ul">
<li class="jquery-sample-li">項目１</li>
<li class="jquery-sample-li">項目２</li>
<li class="jquery-sample-li">項目３</li>
</ul>