jQuery选择与纯javascript

我以w3cschool为例构建了一个手风琴菜单。该示例是用纯javascript编写的。 我想在jQuery中重写它，但它不起作用。 这是原件：

var acc=document.getElementsByClassName（“accordion”）；
var i；
对于（i=0；i

这是我在jQuery中的版本：

$（“.accordion”）。每个（函数（索引）{
$（此）。单击（函数（）{
$（此）.toggleClass（“活动”）；
$（this.next（）.toggleClass（“show”）；
});
});

选定的项目将展开，但打开的项目不会关闭。 我的jQuery哪里错了

---

谢谢大家!

您需要从其他手风琴中删除类

$(".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（）

，

您需要从其他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（）

不需要每个（循环）

第一条路

（函数（）{
$（“.accordion”）。单击（函数（索引）{
$（this.next（）.slideDown（）；
$（this）.sides（“.accordion”）.next（）.slideUp（）；
});
})();
button.accordion{
背景色：#eee；
颜色：#444；
光标：指针；
填充：18px；
宽度：100%；
边界：无；
文本对齐：左对齐；
大纲：无；
字体大小：15px；
过渡：0.4s；
}
按钮。手风琴。激活，按钮。手风琴：悬停{
背景色：#ddd；
}
分区小组{
填充：0 18px；
显示：无；
背景色：白色；
}
div.panel.show{
显示：块；
}

手风琴
第一节
知识产权是一种权利，是一种精英的权利，是劳动和财富的暂时性权利。但是，在最低限度上，我们需要一个实验室来进行日常工作

第二节
知识产权是一种权利，是一种精英的权利，是劳动和财富的暂时性权利。但是，在最低限度上，我们需要一个实验室来进行日常工作

第三节
知识产权是一种权利，是一种精英的权利，是劳动和财富的暂时性权利。但是，在最低限度上，我们需要一个实验室来进行日常工作

不需要每个（用于循环）

第一条路


（函数（）{
$（“.accordion”）。单击（函数（索引）{
$（this.next（）.slideDown（）；
$（this）.sides（“.accordion”）.next（）.slideUp（）；
});
})();
button.accordion{
背景色：#eee；
颜色：#444；
光标：指针；
填充：18px；
宽度：100%；
边界：无；
文本对齐：左对齐；
大纲：无；
字体大小：15px；
过渡：0.4s；
}
按钮。手风琴。激活，按钮。手风琴：悬停{
背景色：#ddd；
}
分区小组{
填充：0 18px；
显示：无；
背景色：白色；
}
div.panel.show{
显示：块；
}

手风琴
第一节
知识产权是一种权利，是一种精英的权利，是劳动和财富的暂时性权利。但是，在最低限度上，我们需要一个实验室来进行日常工作

第二节
知识产权是一种权利，是一种精英的权利，是劳动和财富的暂时性权利。但是，在最低限度上，我们需要一个实验室来进行日常工作

第三节
知识产权是一种权利，是一种精英的权利，是劳动和财富的暂时性权利。但是，在最低限度上，我们需要一个实验室来进行日常工作

只是一个提示，声明这样的变量是毫无意义的。我个人将变量定义为null，并将它们更正为我希望它们与声明分开的值，但在您的情况下，我只需执行
var acc=document.getElementsById（'accordion'），I=null@JoshCrowe你从哪里得到这个主意的<代码>变量i
完全有效，并将
i
初始化为
undefined
@JoshCrowe请不要给出错误提示。@Boldewyn我从来没有说过没有。我说在同一个变量声明中使用
var
两次是没有意义的。他甚至不必在我的示例中输入
=null
，
var acc=“无论他想要什么”，我也很管用。”@JoshCrowe这只是风格的问题。有些人喜欢一个
var
和逗号，有些人喜欢为每个变量使用多个
var
s。每种口味都有一个ESLint配置。（而且迷你们无论如何都会毫无趣味地选择最短的表示形式。）只是一个提示，声明这样的变量是毫无意义的。我个人将变量定义为null，并将它们更正为我希望它们与声明分开的值，但在您的情况下，我只需执行
var acc=document.getElementsById（'accordion'），I=null@JoshCrowe你从哪里得到这个主意的<代码>变量i
完全有效，并将
i
初始化为
undefined
@JoshCrowe请不要给出错误提示。@Boldewyn我从来没有说过没有。我说在同一个变量声明中使用
var
两次是没有意义的。他甚至不必在我的示例中输入
=null
，
var acc=“无论他想要什么”，我也很管用。”@JoshCrowe这只是风格的问题。有些人喜欢一个
var
和逗号，有些人喜欢为每个变量使用多个
var
s。每种口味都有一个ESLint配置。（而且迷你们会毫无品味地选择最短的代表。）非常感谢！为什么纯javascript更紧凑？为什么我不需要.each（）方法$（“.accordion”）循环到找到的所有元素？@robyg