アコーディアンがオブジェクト指向のjavascriptを使用して正しく動作していない

Question

私はaccordianオブジェクト指向のjavascriptを使用しています。クリックするとトグルが機能しません。表示コンテンツをクリックするとアイコンが表示されます。+と他の子初めはactiveになります。

私はちょうどオブジェクト指向のjavascript.Anythingコードを間違って学習を始めた私に知らせてください。

Accordion = { 
 
\t accordionContent: '.accordion-s1 .accordion--content p', 
 
\t accordionTitle: '.accordion--title', 
 
\t init: function() { 
 
\t $(this.accordionTitle).click(this.toggleAccordion.bind(this)); 
 
\t }, 
 
\t toggleAccordion: function() { 
 
\t  $(this.accordionContent).slideToggle(); 
 
\t  $(this.accordionTitle).removeClass("active"); 
 
\t  if($(this.accordionTitle).siblings().is(":visible")) { 
 
\t   $(this.accordionTitle).siblings().slideDown(); 
 
       $(this).find('.fa.fa-times').toggleClass('plus'); 
 
\t   $(this.accordionTitle).addClass("active"); 
 
\t  } 
 
\t } 
 
} 
 
$(document).ready(function(){ 
 
    Accordian.init(); 
 
});

.accordion-s1 .accordion--title { 
 
    display: flex; 
 
    flex-direction: row; 
 
    padding: 10px; 
 
    border-bottom: 1px solid rgba(0, 0, 0, 0.1); 
 
    font-weight: 300; 
 
    transition: all .25s ease; 
 
    background-color: #2783e8; 
 
    color: #ffffff; 
 
} 
 
.accordion-s1 .accordion--title h4 { flex:1;font-weight: 600;} 
 
.accordion-s1 .aticon-times { padding: 5px;} 
 
.plus { 
 
    transform: rotate(45deg); 
 
    transition: all .25s ease; 
 
} 
 
.accordion-s1 .accordion--content { 
 
    padding: 10px 20px; 
 
    background: whitesmoke; 
 
}

<script src="https://use.fontawesome.com/a2e210f715.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script> 
 
<div class="accordion-s1"> 
 
\t \t \t <div class="accordion--single"> 
 
\t \t \t \t <div class="accordion--title"> 
 
\t \t \t \t \t <h4>London Style</h4> 
 
\t \t \t \t \t <span class="accordion--i"> 
 
\t \t \t \t \t \t <i class="fa fa-times aticon-times"></i> 
 
\t \t \t \t \t </span> 
 
\t \t \t \t </div> 
 
\t \t \t \t <div class="accordion--content"> 
 
\t \t \t \t \t <p>Alienum phaedrum torquatos nec eu, vis detraxit periculis ex, nihil exp eten in mei. Mei an pericula euripidis, hinc partem ei est. Eos ei nisl graecis, vixet aperiri consequat an. Eius lorem tincidunt vix at, vel pertinax sensibus id. Pericula euripidis, hinc partem ei est.</p> 
 
\t \t \t \t </div> 
 
\t \t \t </div> 
 
\t \t \t <div class="accordion--single"> 
 
\t \t \t \t <div class="accordion--title"> 
 
\t \t \t \t \t <h4>London Style</h4> 
 
\t \t \t \t \t <span class="accordion--i"> 
 
\t \t \t \t \t \t <i class="fa fa-times aticon-times"></i> 
 
\t \t \t \t \t </span> 
 
\t \t \t \t </div> 
 
\t \t \t \t <div class="accordion--content"> 
 
\t \t \t \t \t <p>Alienum phaedrum torquatos nec eu, vis detraxit periculis ex, nihil exp eten in mei. Mei an pericula euripidis, hinc partem ei est. Eos ei nisl graecis, vixet aperiri consequat an. Eius lorem tincidunt vix at, vel pertinax sensibus id. Pericula euripidis, hinc partem ei est.</p> 
 
\t \t \t \t </div> 
 
\t \t \t </div> 
 
\t \t </div>

Answer 1

私はあなたの与えられたコードから間違いのカップルを発見しました。 $(this.accordionContent).slideToggle()は実際にすべての要素を対象としています。同じものが$(this.accordionTitle).siblings()である。

こんにちは、あなたは、次のコードを試すことができますについては

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で

：あなたはAccordian` `上のスペルを修正した場合、それは現在のエラーがクリアされます

<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>