jquery show and hide 버튼

jquery show and hide에 작은 문제가 있습니다.jquery show and hide 버튼

나는 클릭을 활성화하고 상자를 보여주는 버튼이 있습니다.

은 가능한

여기 내 코드 상자를 페이드 아웃 박스의 외부를 클릭하는 것입니다.

$('.normal-btn.interest').click(function(){ 
    $('.categories-wrap').fadeIn(); 
}) 

$('what needs to be here? ').click(function(){ 
    $('.categories-wrap').fadeOut(); 
})

출처

2013-10-09 Paul Designer

코드를 사용하여 피들을 올리십시오. – Exception

예, 당신은에 click 이벤트를 바인딩 할 수 있습니다 document 같은 : 시도

$('.normal-btn.interest').click(function(e){ 

    // Prevent the event from bubbling up the DOM tree 
    e.stopPropagation(); 
    $('.categories-wrap').fadeIn(); 
}); 

$(document).click(function(){ 
    $('.categories-wrap').fadeOut(); 
});

출처

2013-10-09 11:33:38

고마워요.하지만 상자를 클릭하자마자 사라 집니까 ?? –

이벤트가 거품을 내며 버튼을 클릭하면 요소가 표시되고 그 바로 뒤에 두 번째 처리기가 숨 깁니다. – undefined

@PaulDesigner : 이벤트가 DOM 트리를 버블 링하지 못하게해야합니다. 업데이트 된 코드가 도움이되는지 확인하십시오! –

이 :

$('.normal-btn.interest').click(function(e){ 
     e.stopPropagation(); 
    $('.categories-wrap').fadeIn(); 
}); 

$(document).not($(".normal-btn.interest")).click(function(){ 
    $('.categories-wrap').fadeOut(); 
});

출처

2013-10-09 11:41:07

나 내가이

<pre> 
<!DOCTYPE html> 
<html> 
<head> 
<script 
src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"> 
</script> 
<script> 
$(document).ready(function(){ 
$("#hide").click(function(){ 
    $("p").toggle(); 

    var x = $("#hide").text(); 

    if(x=="Hide"){ 
    $("button").html("show"); 

    } 
    else 
    { 
    $("button").html("Hide"); 

    } 

}); 

}); 

</script> 
</head> 
<body> 

<p>If you click on the "Hide" button, I will disappear.</p> 

<button id="hide">Hide</button> 



</body> 
</html>

같이했고, 그것은 할 수있어. ry

출처

2017-07-10 22:56:31 vlass

jquery show and hide 버튼

답변

관련 문제