jQuery를 사용하는 다중 플라이 아웃

Question

jQuery를 사용하여 단일 HTML 페이지에서 여러 플라이 아웃을 만들고 싶습니다. 아래 코드를 살펴보십시오.

<div>123 
    <p style="display:none"> 
     <a href="#">1</a> 
     <a href="#">2</a> 
     <a href="#">3</a> 
    </p> 
</div> 
<div>ABC 
    <p style="display:none"> 
     <a href="#">a</a> 
     <a href="#">b</a> 
     <a href="#">c</a> 
    </p> 
</div> 

지금까지는 콘텐츠가 다른 div가 두 개 있습니다. div가 클릭되면 p 태그 (안에 중첩)가 표시/숨기기를 원합니다.

내 jquery의 knowlwdge는 매우 제한되어 있으며이를 달성하기 위해 내 jquery 코드는 다음과 같습니다.

<script> 
$(document).ready(function(){ 
    $("div").click(function(){ 
    $(this p).toggle(); 
    }); 
}); 
</script> 

물론 작동하지 않습니다. 또한 동일한 페이지에 두 개 이상의 div가있을 수 있으며 유사한 플라이 아웃을가집니다.

이것을 달성하려면 어떻게해야합니까?

도움을 주시면 감사하겠습니다.

귀하를 진심으로 감사드립니다.

감사 베즈 A.

Answer 1

HTML 불통 :

<div class="toggle_this">123 
    <p style="display:none"> 
     <a href="#">1</a> 
     <a href="#">2</a> 
     <a href="#">3</a> 
    </p> 
</div> 
<div class="toggle_this">ABC 
    <p style="display:none"> 
     <a href="#">a</a> 
     <a href="#">b</a> 
     <a href="#">c</a> 
    </p> 
</div> 

자바 스크립트 :

$(document).ready(function(){ 

    $(".toggle_this").click(function(){ 
     console.log('divs been hit'); 
    $(this).children().toggle(); 
    }); 

}); 

링크에서 작업 코드를 참조하십시오 :