シンプルなjQueryアコーディオンにアクティブな状態を追加

Question

私はこのシンプルなアコーディオンjQueryスクリプトを用意していますが、これは私が必要とするものとほとんど同じですが、最後のものは苦労しています。アニメーションビットは正常に機能します。つまり、対応するコンテンツブロックが閉じている場合は開いた状態になり、逆も同様です。

はここでjQueryのコードです：

$('.accordion-heading').click(function(){ 
    $(this).next().slideToggle(300); 
    $('.accordion-content').not($(this).next()).slideUp(300); 
    $('.accordion-heading.active').removeClass('active'); 
    $(this).addClass('active'); 
}); 

私は見出しに「アクティブ」クラスを持つようにしたいが、私は同じ要素を二回クリックされた場合、それを削除する必要があります。現時点では、非アクティブ見出しがクリックされた場合、すべて正常に動作します。ただし、すでにアクティブな見出しが再度クリックされた場合、コンテンツブロックは正しく折りたたまれますが、見出しは「アクティブ」クラスを保持します。

Answer 1

あなたが現在の要素でない要素から.activeクラスを削除するだけです（あなたは同じ$.not()メソッドを使用することができます現在別の要素にある場合）、$.toggleClass()クリックした要素の.activeクラスです。

$('.accordion-heading').click(function(){ 
 
    $(this).next().slideToggle(300); 
 
    $('.accordion-content').not($(this).next()).slideUp(300); 
 
    $(this).toggleClass('active'); 
 
    $('.accordion-heading').not($(this)).removeClass('active'); 
 
});

.accordion-content { 
 
    display: none; 
 
} 
 
.active { 
 
    color: red; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="accordion"> 
 
    <div class="accordion-heading">heading</div> 
 
    <div class="accordion-content">body</div> 
 
    <div class="accordion-heading">heading</div> 
 
    <div class="accordion-content">body</div> 
 
    <div class="accordion-heading">heading</div> 
 
    <div class="accordion-content">body</div> 
 
</div>

Answer 2

クラスを追加してクラスを削除するのではなく、このようにして.toggleClass()を使用することをお勧めします。要素にクラスがある場合は削除し、そうでない場合は追加します。アコーディオンの1つを手作業で開くようにしたい場合は、アクティブなクラスを与え、JSに残りをさせます。

Answer 3

あなたは 'toggleClass（）'を使うことができますが、クリックされた項目がそのクラスをアクティブにしているかどうかを調べることにより、より具体的になることがわかります。この方法で、あなたが出て分岐し、状態に応じて他の機能を実行できます。

$('.accordion-heading').click(function(){ 

    var theHeading = $(this); 
    var theContent = theHeading.next(); 
    var slideTimer = 300; 

    if(theHeading.hasClass('active')) { 
     $('.accordion-heading.active').removeClass('active').next().slideUp(slideTimer); 
     theContent.slideDown(slideTimer); 
     $(this).addClass('active'); 
    } else { 
     theContent.slideUp(slideTimer); 
     $(this).removeClass('active'); 
    } 

});