jQuery toggleCLass() メソッドは、選択した要素に 1 つ以上のクラスを追加または削除するために使用されます。このメソッドは、1 つ以上のクラス名の追加と削除を切り替えます。指定されたクラス名について各要素がチェックされます。クラス名がすでに設定されている場合は削除し、クラス名がない場合は追加します。

このようにして、トグル効果が作成されます。また、switch パラメータを使用して、追加のみまたは削除のみを指定することも容易になります。

構文 :

 $(selector).toggleClass(classname,function(index,currentclass),switch) 

jQuery toggleClass() メソッドのパラメータ

jQueryのtoggleClass()メソッドの例

jQuery toggleClass() メソッドの効果を示す例を見てみましょう。

 $(document).ready(function(){ $(&apos;button&apos;).click(function(){ $(&apos;p&apos;).toggleClass(&apos;main&apos;); }); }); .main { font-size: 150%; color: red; } Toggle class &apos;main&apos; for p elements <p>Hello! javatpoint.com</p> <p>This is popular tutorial website.</p> <p> <b>Note:</b> Click repeatedly on the button to see the toggle effect.</p> 

jQuery toggleClass() の例 2

 toggleClass demo p { margin: 4px; font-size: 16px; font-weight: bolder; cursor: pointer; } .blue { color: black; } .highlight { background: pink; } <p>www.javatpoint.com</p> <p>Java Tutorial</p> <p>SQL Tutorial</p> <p>Android Tutorial</p> <p>HTML Tutorial</p> <p>etc.</p> $( &apos;p&apos; ).click(function() { $( this ).toggleClass( &apos;highlight&apos; ); }); 

jQuery toggleClass() の例 3

 toggleClass demo .wrap &gt; div { float: left; width: 100px; margin: 1em 1em 0 0; padding=left: 3px; border: 1px solid #abc; } div.a { background-color: aqua; } div.b { background-color: burlywood; } div.c { background-color: cornsilk; } toggle toggle a toggle a b toggle a b c <a href="#">Reset</a> var cls = [ &apos;&apos;, &apos;a&apos;, &apos;a b&apos;, &apos;a b c&apos; ]; var divs = $( &apos;div.wrap&apos; ).children(); var appendClass = function() { divs.append(function() &apos;none&apos; ) + &apos; &apos;; ); }; appendClass(); $( &apos;button&apos; ).on( &apos;click&apos;, function() undefined; divs.toggleClass( tc ); appendClass(); ); $( &apos;a&apos; ).on( &apos;click&apos;, function( event ) { event.preventDefault(); divs.empty().each(function( i ) { this.className = cls[ i ]; }); appendClass(); });