使用面向对象javascript无法正常工作

我正在使用面向对象的javascript执行

accordian

，这里的问题是，当我单击时，切换不起作用。因为预期的输出是当我单击“显示内容”时，图标将是

+

，其他子项将关闭。最初，firstchild将是

活动的

我刚开始学习面向对象的javascript。如果代码有问题，请告诉我

手风琴={
手风琴内容：'.accordion-s1.手风琴--内容p'，
手风琴标题：'.手风琴--标题'，
init:function（）{
$（this.accordionTitle）。单击（this.toggleAccordion.bind（this））；
},
toggleacordion:function（）{
$（this.accordionContent）.slideToggle（）；
$（this.acordiontitle）.removeClass（“活动”）；
如果（$（this.accordiontTitle）.sides（）是（“：可见”））{
$（this.accordiontTitle）.sides（）.slideDown（）；
$（this.find（'.fa.fa times'）.toggleClass（'plus'）；
$（this.acordiontitle）.addClass（“活动”）；
}
}
}
$（文档）.ready（函数（）{
accorbian.init（）；
});
.accordion-s1.手风琴——标题{
显示器：flex；
弯曲方向：行；
填充：10px；
边框底部：1px实心rgba（0,0,0,0.1）；
字体大小：300；
过渡：全部.25秒缓解；
背景色：#2783e8；
颜色：#ffffff；
}
.accordion-s1.accordion——标题h4{flex:1；字体大小：600；}
.accordion-s1.aticon时间{padding:5px；}
.另外{
变换：旋转（45度）；
过渡：全部.25秒缓解；
}
.手风琴-s1.手风琴-内容{
填充：10px 20px；
背景：白烟；
}

伦敦风格
在梅的实验中，我们发现了一种新的脂肪酸。我是欧里庇底骨膜，我是西边的。这是一个很好的例子。第四部分，第四部分，第四部分，第四部分，第四部分，第四部分，第四部分，第四部分，第四部分，第四部分，第四部分，第四部分，第四部分，第四部分，第四部分，第三部分，第四部分，第四部分，第四部分，第四部分，第四部分，第四部分

伦敦风格
在梅的实验中，我们发现了一种新的脂肪酸。我是欧里庇底骨膜，我是西边的。这是一个很好的例子。第四部分，第四部分，第四部分，第四部分，第四部分，第四部分，第四部分，第四部分，第四部分，第四部分，第四部分，第四部分，第四部分，第四部分，第四部分，第三部分，第四部分，第四部分，第四部分，第四部分，第四部分，第四部分

我从您给定的代码中发现了几个错误<代码>$（this.accordionContent）.slideToggle（）

实际上是针对所有元素的。同样的还有

$（this.acordiontitle）.sibbines（）

您好，您可以尝试以下代码：

Accordion = {
accordionContent: '.accordion-s1 .accordion--content',
accordionTitle: '.accordion--title',
init: function() {
   $(this.accordionTitle).removeClass('active').eq(0).addClass("active");
   $(this.accordionContent).slideUp().eq(0).slideDown();
   $(this.accordionTitle).click(this.toggleAccordion.bind(this));
},
toggleAccordion: function(e) {

    if($(e.currentTarget).next($(this.accordionContent)).is(":visible")) {
        return
    }

    $(this.accordionTitle).siblings().slideUp();
    $(this.accordionTitle).removeClass('active');

    $(e.currentTarget).next($(this.accordionContent)).slideDown();
    $(e.currentTarget).addClass("active");
}
}
$(document).ready(function(){
  Accordion.init();
});

对于加号，您还需要在CSS和HTML标题部分进行调整

在CSS中：

.accordion--i .fa-times {
    display:inline-block;
}
.accordion--i .fa-plus {
    display:none;
}
.active .accordion--i .fa-times {
    display:none;
}
.active .accordion--i .fa-plus {
    display:inline-block;
}

在HTML中，您需要在每个块的每个标题中添加以下更改：

    <div class="accordion--title">
        <h4>London Style</h4>
        <span class="accordion--i">
            <i class="fa fa-times aticon-times"></i>
            <i class="fa fa-plus aticon-times"></i>
        </span>
    </div>

伦敦风格

如果您在

Accordian

上修改拼写，它将清除当前错误。除此之外，还有什么问题？@charlietfl，谢谢。但无论我在哪里使用手风琴都与拼写错误无关。在我的问题中，我提到了曾经读到的问题。我更新了添加或删除基于加号的“活动”类。@谢谢，我们可以使用slideToggle而不是slideup/down？有没有可能，一次只能打开一个部分，而折叠所有其他部分？