jqueryのtoggleClassメソッドはスタイル切り替えに使用されます

≪インスタンス｜Instance｜emdw≫
すべての要素を設定および削除するmainクラスを切り替えます.

$("button").click(function(){
  $("p").toggleClass("main");
});

定義と使用法
toggleClass()は、選択した要素を設定または削除する1つ以上のクラスを切り替えます.
このメソッドは、各要素で指定されたクラスをチェックします.存在しない場合はクラスを追加し、設定されている場合は削除します.これがいわゆる切り替え効果です.
ただし、「switch」パラメータを使用すると、クラスのみを削除または追加することを指定できます.
構文

$(selector).toggleClass(class,switch)

パラメータ
説明
class
必要です.classを追加または削除する指定した要素を指定します.いくつかのclassを指定する場合は、スペースを使用してクラス名を区切ります.
switch
オプション.ブール値classを追加または削除するかどうかを指定します.
関数を使用したクラスの切り替え

$(selector).toggleClass(function(index,class),switch)

みずからやってみる
パラメータ
説明
function(index,class)
必要です.追加または削除する1つ以上のクラス名を返す関数を指定します.

index-オプション.セレクタのindex位置を受け入れます.

class-オプション.セレクタの現在のクラスを受け入れます.

switch
オプション.ブール値クラスを追加(true)または削除(false)するかどうかを指定します.
 
 
例:
jsコード:
$(".play").click(function(){ 　　$(this).toggleClass("play"); })
 
 
htmlページ:
このdivにはtime-panel-btnとplayの2つのclass名がある.
 
cssスタイル:
.time-panel-btn.play {background: url(http://webmap0.map.bdstatic.com/newheatmap/static/index/images/time-btn-play_22fead8.png?__sprite) no-repeat 0 0;}
.time-panel-btn {background: url(http://webmap0.map.bdstatic.com/newheatmap/static/index/images/time-btn-pause_8c55183.png?__sprite) no-repeat 0 0;width: 33px;height: 33px;float: right;cursor: pointer;}
 
転載先:https://www.cnblogs.com/rcstudy/p/5025215.html