HOME > > > > >

.toggleClass(className)

.toggleClass( className )

引数

(string)className
追加、削除するクラス名。スペースで区切りで複数設定可能

classNameで指定されたクラス名があれば削除、なければ追加される。

サンプル

実行結果

  • 設定なし
  • class="highLight"
  • class="firstClass highLight"

Javascript

  1. $('.jqTest1 .execute').click(function(){
  2.     var str = '';
  3.     $('.jqTest1 li').toggleClass('highLight').each(function(){
  4.         str += $(this).attr('class') + '<br />';
  5.     });
  6.     $('.jqTest1 .screen').html(str);
  7. });

HTML

  1. <div class="jqTest1">
  2.     <input type="button" value="execute" class="execute cq-btn m-primary" />
  3.     <ul>
  4.     <li>設定なし</li>
  5.     <li class="highLight">class="highLight"</li>
  6.     <li class="firstClass highLight">class="firstClass highLight"</li>
  7.     </ul>
  8.     <hr />
  9.     <div class="screen">
  10.     </div>
  11. </div>

CSS

  1.  
  2. .jqTest1 li.highLight {
  3.     font-weight: bold;
  4.     color: #FFFFFF;
  5.     background: #990000;
  6. }
  7.  

.toggleClass( className, switch )

引数

(string)className
追加、削除するクラス名。スペースで区切りで複数設定可能
(boolean)switch
trueの場合追加、falseの場合削除

.toggleClass( [switch] )

.toggleClass( function(index, class, switch) [, switch] )