div의 바깥 쪽을 클릭하십시오.

Question

로그인 버튼을 클릭 할 때 토글 할 로그인 영역 (아래 코드)이 필요합니다. 또한, 로그인 영역 밖에서는 클릭 할 때 로그인 영역을 숨기고 로그인 버튼에서는 숨길 필요가 없습니다.

<button id="loginBtn">Login</button> 

<div id="loginArea"> 
    <!-- here is login form --> 
</div> 

어떻게하면됩니까?

Answer 1

$(function() { 
    $('#loginBtn, #loginArea').on('click', function(e) { 
     $('#loginArea').show(); 
     e.stopPropagation(); 
    }); 
    $('body').on('click', function() { 
     $('#loginArea').hide(); 
    }); 
}); 

클릭이 로그인 영역 내에서 또는 버튼에있는 경우, 이벤트는 로그인 영역을 숨길 수있는 두 번째 핸들러로하지 않습니다.

Answer 2

사용 :

$('body').on('click', '#loginBtn', function(){ 
    $('#loginArea').show(); 
}); 

가 로그인을 보여줍니다 다음 그것을 제거하는 동안 그것의 외부를 클릭 할 때 :

$(document).on('click', 'body:not(#loginArea)', function(){ 
    $('#loginArea').hide(); 
}); 

Answer 3

어떻게 그건?

$('#loginBtn').click(function (e) { 
    $('#loginArea').toggle(); 
    e.stopPropagation(); 
}); 

$(document).on('click',function() { 
    $('#loginArea').hide(); 
});