추가하거나 내가처럼 보이는 마크 업이 사업부

Question

에서 클래스를 제거하려면 다음

<div class="accordion is-open"> 
    <h3 class="accordion-header"> 
     HADER 
     <span class="accordion-indicator"></span> 
    </h3> 
    <div class="accordion-content"></div> 
</div> 

<div class="accordion is-open"> 
    <h3 class="accordion-header"> 
     HADER 
     <span class="accordion-indicator"></span> 
    </h3> 
    <div class="accordion-content"></div> 
</div> 

<div class="accordion"> 
    <h3 class="accordion-header"> 
     HADER 
     <span class="accordion-indicator"></span> 
    </h3> 
    <div class="accordion-content"></div> 
</div> 

는 내가 뭘하려고 추가 또는 클래스 .accordion와 div에 클래스 .is-opened을 제거하기 위해 jQuery를 사용하는 것입니다 class .accordion-header

내 문제는 divs의 일부가 이미 클래스 .is-opened을 포함하고 일부는 그렇지 않다는 것입니다. 클릭하고 열 수 있어야합니다. (클래스 추가 .is- 열림) 클릭 한 특정 div.

여기 내 jQuery입니다 :

function accordionOpener(obj) { 
    var accordionHeader = obj.find('.accordion-header'); 
    var accordionBody = obj.find('.accordion'); 
    accordionHeader.on('click',function(){ 
     $(accordionBody).toggleClass('is-open'); 
    }); 
} 
new accordionOpener($(this)); 

내가 10 명 찬성 늙었 것처럼 나는, 자바 스크립트 그래서 나에게 말을 jQuery를 큰 프로 아닙니다.

Answer 1

논리가 올바르지 않습니다. 이 문제를 해결하려면 click 이벤트 핸들러를 .accordion-header 클래스에 직접 연결하십시오. 거기에서 DOM traversal을 사용하여 관련된 .accordion 요소를 찾고 클래스를 토글 할 수 있습니다. 이 시도 :

$(function() { 
 
    $('.accordion-header').click(function() { 
 
    $(this).closest('.accordion').toggleClass('is-open'); 
 
    }); 
 
});

.is-open { color: #C00; } /* this is only to see the class being added/removed */

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="accordion is-open"> 
 
    <h3 class="accordion-header"> 
 
     HADER 
 
     <span class="accordion-indicator"></span> 
 
    </h3> 
 
    <div class="accordion-content"></div> 
 
</div> 
 

 
<div class="accordion is-open"> 
 
    <h3 class="accordion-header"> 
 
     HADER 
 
     <span class="accordion-indicator"></span> 
 
    </h3> 
 
    <div class="accordion-content"></div> 
 
</div> 
 

 
<div class="accordion"> 
 
    <h3 class="accordion-header"> 
 
     HADER 
 
     <span class="accordion-indicator"></span> 
 
    </h3> 
 
    <div class="accordion-content"></div> 
 
</div>

Answer 2

당신은 jQuery를 UI 아코디언 플러그인 간단하게 사용을 할 수 : https://jqueryui.com/accordion/ 단순히 div의 모든 요소를 ​​래핑하고 h3 태그로 제목을 변경합니다. 다음과 같은 플러그인을 호출 :

는

$('.accordion').accordion(); 

이 플러그인은 또한 키보드 액세스 및 다른 접근성 기능을 제공합니다.

Answer 3

열린 아코디언에서만 유지 관리하는 방법입니다. 는 CSS에서

$('.accordion').click(function(){ 
    $('.accordion').removeClass('is-open'); 
    $('.show').removeClass('show'); 
    $(this).addClass('is-open'); 
    $('.accordion-content', this).addClass('show') 
}) 

당신은 .show 클래스를 지정하고 다른 모든 패널을 숨길 필요가있다. 나는 또한 그것의 지옥을 위해 커서를 추가했다. :)

.accordion { 
    cursor: pointer; 
} 

.accordion-content { 
    display:none; 
} 

.show { 
    display: initial; 
}