jqueryを使用してトグルでCSS画像クラスを追加および削除する

Question

ユーザーがartcileのh3要素をクリックすると、アコーディオンのように表示されますが、少し異なります。

私が達成できないことは、要素のslideToggle関数が呼び出されたときに画像が表示されず、変更されないことです。しかし、slideToggleは正常に動作しています。私は援助が必要なイメージです。

HTML： -

<div class="pages"> 
    <article class="collapsible expanded collapsed"> 
     <h3><?php echo $lang->xlate('presentation-b');?></h3> 
    </article> 

    <div class="content"> 
     <ul> 
      <li> 
       <?php echo $lang->xlate('presentation-c');?> </li> 



      <li> 
       <?php echo $lang->xlate('presentation-d');?> </li> 



      <li> 
       <?php echo $lang->xlate('presentation-e');?> </li> 
     </ul> 
    </div> 
</div> 

CSS

#paragraph .pages .collapsible { 
    padding: 2px; 
    cursor: pointer; 
    font-weight: bold; 
} 
#paragraph .pages .collapsible .expanded {background: url('../img/list.png') no-repeat left top;} 
#paragraph .pages .collapsible .collapsed {background: url('../img/pagination.gif') no-repeat left top;} 

のjQuery： -

 $('.collapsible').click(function(){ 
     $coll = $(this); 
     $content = $coll.next(); 
     $content.slideToggle(500, function() { 
     //execute this after slideToggle is done 
     //change text of header based on visibility of content div 
        if($(this).hasClass('expanded')) 
        { 
         $(this).toggleClass('collapsed expanded'); 
        } 
        else 
        { 
         $(this).toggleClass('expanded collapsed'); 
        } 
     }); 
    }); 

Answer 1

あなたはクラスを追加または削除するときにクラス・インジケータ"."を必要といけません。つまり、各状態の背景イメージを切り替えることはありません。

$(this).addClass('.collapsed').removeClass('.expanded'); 

ので、あなたのコードは

if ($(this).hasClass('.expanded')) { 
    $(this).addClass('collapsed').removeClass('expanded'); 
} else { 
    $(this).addClass('expanded').removeClass('collapsed'); 
} 

Answer 2

クラスの追加や削除にクラス名の前に.を削除しなければなりません。

$(this).addClass('expanded').removeClass('collapsed'); 

また、toggleClass()を使用すると、クラスを切り替えることができます。

$(this).toggleClass('collapsed expanded'); 

は次のように：

$('.collapsible').click(function() { 
    $coll = $(this); 
    $content = $coll.next(); 
    $content.slideToggle(500, function() { 
     //execute this after slideToggle is done 
     //change text of header based on visibility of content div 
     $(this).toggleClass('collapsed expanded'); 
    }); 
});