Question

我想在登录按钮点击时切换登录区域（在下面的代码中）。此外，我在登录区域外的任何地方点击时都需要隐藏登录区域，而不是登录按钮。

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

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

我怎样才能做到这一点？

Answer 1

使用：

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

将显示登录信息，而当您在其外部点击时，以下内容将将其删除：

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

Answer 2

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

如果点击位于登录区域或按钮内，则事件将不会进入第二个处理程序以隐藏登录区域。

Answer 3

怎么样？

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

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

单击div以外的其他内容

3 个答案: