토글 요소/

Question

<ul> 
    <li> 
    <div class="single-toggle">|Toggle|</div> 
    <div class="visible-when-folded"> 
     <div class="name">Peter</div> 
     <div class="date">3 january 1984</div> 
    </div> 
    <div class="invisible-when-folded"> 
     <div class="about">Funny guy</div> 
     <div class="contact_info">0879876745</div> 
    </div> 
    </li> 

    <li> 
    <div class="single-toggle">|Toggle|</div> 
    <div class="visible-when-folded"> 
     <div class="name">David</div> 
     <div class="date">17 April 1988</div> 
    </div> 
    <div class="invisible-when-folded"> 
     <div class="about">Jackass</div> 
     <div class="contact_info">0979876345</div> 
    </div>  
    </li> 
</ul> 

원하는 결과 클릭

즉 I는 div.invisible-when-folded 내부 요소 만이 각각 li 요소 사라 |Toggle| 요소를 클릭 할 때. 내가 this code에 |Toggle|에

클릭을 시도 무엇

는 동시에 두 li 요소에서 볼 보이지 않는 사업부를/전환합니다. 클릭 한 토글 중 li 만 토글하게하려면 어떻게해야합니까?

Answer 1

클래스로 클릭 한 요소의 형제 자매를 모두 (다음)를 선택 :

$(this).nextAll('.invisible-when-folded').toggle(); 

DEMO

는 jQuery의 traversal methods.

Answer 2

에서보세요 방법에 대해 :

$(".single-toggle").click(function(){ 
    $(this).closest('li').find('.invisible-when-folded').toggle(); 
});