jquery toggle div show hide

Question

div 클래스 {inner}의 내부 자식을 클릭 할 때 표시하려고하고 사용자가 다시 클릭하면 해당 클래스를 숨 깁니다. 하지만 문제는 사용자가 입력 필드를 클릭하면 다시 숨 깁니다.

<div class="list"> 
<label>Enter your name</label> 
<input type="text" class="data"/> 
</div> 

<div class="list"> 
<label>Enter your Number</label> 
<input type="text" class="data"/> 
</div> 

JS 코드

$(document).ready(function() 
    { 
    $(".list").click(function(event){     
    $(this).children().slideToggle(1000);    
      }); 
}); 

Answer 1

click 필드를 입력 필드에 바인드하고 event.stopPropagation()을 호출하십시오.

설명 : 이벤트가 DOM 트리를 버블 링하지 못하도록하여 부모 처리기가 이벤트를 통보받지 않도록합니다.

$(".list input").click(function(e){ 
    e.stopPropagation(); 
}); 

나 :

$(".list").click(function(){ 
      $(this).children().toggle(); 
     }); 
     $(".list").children().click(function(e){ 
      e.stopPropagation(); 
     }); 

Answer 2

당신은 클릭이 실제로 자식 노드에서 버블 경우 항상 확인하고,이 경우 그냥 드롭 수 :

는

$(".list").click(function(event){     
    if($(event.target).parents('.list').length > 0) { return; } 
    $(this).children().slideToggle(1000);    
}); 

또 다른 방법은 것 하위 노드에서 event.preventDefault()을 호출하여 버블 링을 수동으로 취소 할 수 있지만 하위 노드의 다른 부분을 클릭 할 수있게하려면 약간의주의가 필요합니다.

Answer 3

이 사용자가 입력 요소를 클릭하면 이벤트가 거품 때문이다. 당신은 아래의 코드 줄을 사용하여 이벤트의 이벤트 전파를 중지해야 :

evt.stopPropagation(); 

Answer 4

이 사용 기능 jQuery.delegate 당신은 부모 요소 ('.list')을 지정할 수 있습니다 http://api.jquery.com/delegate/

에 대한 완벽한 예입니다

그런 다음 "클릭"기능을 사용하려는 상위 요소 ('label')에 하위 개체를 지정합니다. 조심해, 함수는 "자식 요소"에 호출되므로 .parent() 요소를 토글해야합니다.

$(".list").delegate('label','click',function(event){     
    $(this).parent().slideToggle(1000);    
});