JQuery - untoggle - removeClassが定義されていません

Question

私はボタン付きの単純なページを持っています。ボタンをクリックすると、toggleを使用してこのボタンのすぐ下にテキストが表示されます。

この作品は正しいですが、別のセクション/ボタンを "アンググル"しません。だから私が望むのは、ボタンの下のセクションをトグルするだけでなく、トグルされた別のセクションのトグルを解除することです。

私はクリック直後に実行されるすべてのセクションにループを追加しました。すべてのセクションを非表示にしてから、何をしなければならないのですか？thisセクションを表示してください。

ncaught TypeError: acc.removeClass is not a function

$(document).ready(function(){ 
    var accs = $('.accordion'); 

    $('.accordion').on('click',function(){ 
     $.each(accs,function(acc){ 
      acc.removeClass('active'); # NOT WORKING 
      acc.nextElementSibling.classList.remove('show'); # NOT WORKING 
     }); 

     this.classList.toggle('active'); # WORKING 
     this.nextElementSibling.classList.toggle("show"); # WORKING 

    }) 
}); 

問題がどこにあるか知っていますか？

Answer 1

私は

$(document).ready(function(){ 
    var accs = $('.accordion'); 

    $('.accordion').on('click',function(){ 
     accs.each(function(index){ 
      $(this).removeClass('active'); 
      $(this).next().removeClass("show"); 
     }); 

     $(this).toggleClass('active'); 
     $(this).next().toggleClass("show"); 

    }) 
}); 

Answer 2

ラップacc〜$(acc) - これはjqueryオブジェクトではありません。

Answer 3

removeClass()はDOMエレメントのネイティブメソッドではないため、エラーが発生しています。 DOM要素をjQueryオブジェクトに変換し、メソッドを使用できます。

あなたが既に持っているので、jQueryのは、オブジェクトに直接

accs.removeClass('active'); //remove class from element 
accs.next().removeClass('show'); //Remove class from sibling 

代わりの

$.each(accs,function(acc){ 
     acc.removeClass('active'); # NOT WORKING 
     acc.nextElementSibling.classList.remove('show'); # NOT WORKING   
    }); 

Answer 4

に動作するコードの下に願っていますようにそれを使用して問題がaccがあるということです各関数内の要素のインデックス。あなたは今、あなたがオブジェクトとして整数（インデックス）を治療している$(this).eq(acc)またはaccs.eq(acc).

$(document).ready(function(){ 
    var accs = $('.accordion'); 
    $('.accordion').on('click',function(){ 
     $.each(accs,function(index){ 
      accs.eq(index).removeClass("active"); 
      accs.eq(index).classList.remove("show"); //you don't need next because this each function will remove the class 'active' and 'show' from every accs element regardless 
     }); 

     $(this).toggleClass('active'); 
     $(this).next().toggleClass("show"); 
    }) 
}); 

を使用する必要があります。それは動作しません。