아코디언 콘텐츠가 표시되지 않습니다. - JQuery

Question

헤더를 클릭하여 콘텐츠, 아코디언 스타일을 전환하려고합니다. 여기에 내 예가있다. Firebug를 실행할 때 .click 함수가 호출되지만 아코디언 내용은 전환되지 않는다. 몇 가지 다른 선택기 조합을 시도했지만 아직 성공하지 못했습니다.

모든 의견을 환영합니다.

감사

<style type="text/css"> 

.content { display: none;} 

</style> 
<div class="accordion complete" id="step_1"> 
    <div class="accordion-tab">Step 1.</div> 
    <span> 
     <div class="content"> 
     <p> 
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque blandit aliquam malesuada. 

     </p> 
    </div> 
    </span> 
</div> 

<script type="text/javascript"> 

    $(document).ready(function() { 

     $(".accordion-tab").click(function(e) { 

      e.preventDefault(); 
      $(this).closest('span').find('.content').not(':animated').slideToggle(); 


     }); 

    }); 
</script> 

Answer 1

당신은 .next() 필요가 없습니다 .closest()

가까운 -> 설명 : 세트의 각 요소에 대해, 요소 자체를 테스트하여 선택 일치하는 첫 번째 요소를 얻을 DOM 트리에서 상위 항목을 순회합니다.

은 DOM의 현재 요소 또는 조상과 가장 일치합니다.

다음 -> 설명 : 일치하는 요소의 집합에 각 요소의 바로 다음 형제를 가져옵니다. 선택기가 제공되면 은 해당 선택기와 일치하는 경우에만 다음 형제를 검색합니다. JQuery#closest

그래서 당신의 쿼리 필요 :

DEMO

$(document).ready(function() { 
    $(".accordion-tab").click(function (e) { 
     e.preventDefault(); 
     $(this).next('span').find('.content').not(':animated').slideToggle(); 
    }); 
}); 

Answer 2

나는 그렇지 않은 아이들에, 조상에서 검색 것 같은이 "가장 가까운 ('기간')을 나갈 수 있다고 생각 다음과 같아야합니다 :

$(this).find('.content').not(':animated').slideToggle(); 

힌트로 항상 즐겨 찾는 br에서 테스트하십시오. owser의 콘솔은 jquery의 선택 순서이므로, 매우 쉽게 잃어 버릴 수 있습니다.