Accordian 제대로 작동하지 않는 개체 지향 자바 스크립트

Question

나는 여기에서 객체 지향 자바 스크립트를 사용하여 accordian을 사용하고 있습니다. 클릭하면 문제가 토글 작동하지 않습니다. 출력 내용을 표시 할 때 아이콘을 클릭하면 + 및 기타 자식이 표시됩니다. close.initially, firstchild는 active이 될 것입니다.

저는 방금 객체 지향 자바 스크립트를 배우기 시작했습니다. 코드에 문제가 있으면 알려주세요.

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

:

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