jQuery选择vs纯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

You need to remove class from other accordions.

$(".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");
});

And no need of .each() for binding events

Answer 2

No need of each(For loop)

First Way

(function() {

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

})();

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>

Second Way

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

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>