자신의 토글 버튼을 클릭 한 후에 현재 div 만 토글합니까?

Question

나는 다음과 같은 HTML 구조를 가지고 :

(옥 템플릿 언어) 나는 (정상에서) .review-item div의 높이 확장 및 축소 할 수 있도록하려면

#review-item-1.review-item 
     a.submit-review-toggle(href="#").review-item-toggle + 
     h3 Service 
     .review-overview 
     textarea(class='submit-review-overview', name='message', placeholder='Overview') 
     .review-photo 
     img(src="images/no-photo.png") 

:

$(".submit-review-toggle").click(function() { 
    $(".review-item").animate({ 
     height: "toggle", 
    }, "slow"); 
}); 

을

문제는 하나의 페이지에 .review-item 개의 div가 많이있을 것이라는 점입니다. 따라서 .submit-review-toggle 버튼을 클릭 한 후 '현재'.review-item div를 토글해야합니다.

어떻게해야합니까?

Answer 1

는 다음과 같은 시도 :

$(".submit-review-toggle").click(function() { 
    $(this).closest(".review-item").animate({ 
     height: "toggle", 
    }, "slow"); 

});

가장 가까운 선택기는 현재 요소에서 시작하여 DOM 트리를 통해 진행되는 선택기와 일치하는 첫 번째 요소를 가져옵니다. See here for documentation.