jQuery - 중첩 된 자식 선택자

Question

div에 div가 표시되도록 slideToggle 함수를 사용하고 있습니다. 토글되어있는 div에도 체크 박스가있는 양식이 포함되어 있습니다. 확인란을 선택하면 div 슬라이드가 닫힙니다.

어떻게 이것을 피하기 위해 셀렉터를 더 잘 사용할 수 있습니까? 여기

JS

$('.head').click(function(){  
     $(this).find('div.body').slideToggle(); 
     return false; 
    }); 

되는 HTML

<div class="head"> 
Show Content 1 
<div class="body" style="display:none;">Content</div>​ 
</div> 

Answer 1

문제는 당신이 머리 클래스와 사업부에 클릭 이벤트 리스너를 부착 한 것입니다. 모든 이벤트가 문서 객체 모델 위로 올라가므로 "head div"내부의 아무 곳이나 클릭하면 이벤트가 시작됩니다. 문제를 해결하는 방법에는 여러 가지가 있습니다. 입력 요소의 이벤트 전파를 중지하거나 문서를 재구성 할 수 있습니다. 나는 div 내에 포함 된 모든 것에 대한 전파를 멈추지 않고 유지하기 위해 구조 조정을 선호한다.

<div class="head">Show Content 1</div> 
<div class="body" style="display:none;">Content</div> 

$('.head').click(function(){  
    $(this).next('div.body').slideToggle(); 
    return false; 
});​ 

더 세련된 jQuery 및 DOM 솔루션이 있지만 잘하면이 아이디어를 줄 것입니다.