点击外部和更多

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(); 
});