javascript - jQuery 选择与纯 JavaScript

Question

我采用了 w3cschool 的示例来构建 Accordion 菜单。该示例是用纯 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 中删除类。

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

并且不需要 .each() 来绑定(bind)事件