jQueryの選択と純粋なjavascript

Question

私はw3cschoolからアコーデオンメニューを作成するための例を取っ​​た。この例は、純粋なjavascriptで書かれています。 jQueryで書き直したいけど動作しません。 これはオリジナルです：

var acc = document.getElementsByClassName("accordion"); 
var i; 

for (i = 0; i < acc.length; i++) { 
    acc[i].onclick = function() { 
     this.classList.toggle("active"); 
     this.nextElementSibling.classList.toggle("show"); 
    } 
} 

、これはjQueryのでは私のバージョンです：

$(".accordion").each(function (index) { 
    $(this).click(function() { 
     $(this).toggleClass("active"); 
     $(this).next().toggleClass("show"); 
    }); 
}); 

項目が膨張し、選択したが開かれた項目が閉じません。 私のjQueryでどこが間違っていますか？

ありがとうございました！

Answer 1

他のアコーディオンからクラスを削除する必要があります。

$(".accordion").click(function() {  
    var self = $(this); 

    //get other accordions 
    var otherAccordion = $(".accordion").not(self); 
    //remove classes 
    otherAccordion.removeClass("active"); 
    otherAccordion.next().removeClass("show");  

    //toggle classes 
    self.toggleClass("active"); 
    self.next().toggleClass("show"); 
}); 

そして結合事象

Answer 2

ため.each()の必要はありませんそれぞれの必要なし（ループ用）

最初の方法

(function() { 
 

 
$(".accordion").click(function (index) { 
 
    $(this).next().slideDown(); 
 
    $(this).siblings(".accordion").next().slideUp(); \t 
 
}); 
 

 
})();

button.accordion { 
 
background-color: #eee; 
 
color: #444; 
 
cursor: pointer; 
 
padding: 18px; 
 
width: 100%; 
 
border: none; 
 
text-align: left; 
 
outline: none; 
 
font-size: 15px; 
 
transition: 0.4s; 
 
} 
 

 
button.accordion.active, button.accordion:hover { 
 
background-color: #ddd; 
 
} 
 

 
div.panel { 
 
padding: 0 18px; 
 
display: none; 
 
background-color: white; 
 
} 
 

 
div.panel.show { 
 
display: block; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<h2>Accordion</h2> 
 

 
<button class="accordion">Section 1</button> 
 
<div class="panel"> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> 
 
</div> 
 

 
<button class="accordion">Section 2</button> 
 
<div class="panel"> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> 
 
</div> 
 

 
<button class="accordion">Section 3</button> 
 
<div class="panel"> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> 
 
</div>

第二の方法は、

$(".accordion").click(function (index) { 
 
if($(this).hasClass("active")) { 
 
$(this).removeClass("active"); 
 
$(this).next().slideUp(); 
 
\t } 
 
\t else { 
 
\t $(this).addClass("active"); 
 
    $(this).next().slideDown(); 
 
\t } 
 
\t $(this).siblings(".accordion").removeClass("active"); 
 
\t $(this).siblings(".accordion").next().slideUp(); \t 
 
});

button.accordion { 
 
background-color: #eee; 
 
color: #444; 
 
cursor: pointer; 
 
padding: 18px; 
 
width: 100%; 
 
border: none; 
 
text-align: left; 
 
outline: none; 
 
font-size: 15px; 
 
transition: 0.4s; 
 
} 
 

 
button.accordion.active, button.accordion:hover { 
 
background-color: #ddd; 
 
} 
 

 
div.panel { 
 
padding: 0 18px; 
 
display: none; 
 
background-color: white; 
 
} 
 

 
div.panel.show { 
 
display: block; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<h2>Accordion</h2> 
 

 
<button class="accordion">Section 1</button> 
 
<div class="panel"> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> 
 
</div> 
 

 
<button class="accordion">Section 2</button> 
 
<div class="panel"> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> 
 
</div> 
 

 
<button class="accordion">Section 3</button> 
 
<div class="panel"> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> 
 
</div>