javascript - 在正文中单击 div 隐藏，当我单击 div 时它也隐藏

Question

我想在链接点击时显示一个 div，如果在链接或 div 之外点击则隐藏。

<a href="#" class='login' id="login">login </a>
<div class="login-panel"> 
    <input type="text" id="LoginForm_username" name="LoginForm[username]" class="field" value="username">
    <input type="password" id="LoginForm_password" name="LoginForm[password]" class="field" value="password">
    <input type="submit" value="Login"  class="loginBtn">
</div>

最初 div 是隐藏的。脚本是

$(document).ready(function() {
    $("#login").click(function () {
        $("div.login-panel").toggle();
    });

    $("body").click(function(e){
        if(e.target.className == "login" || e.target.className == "login-panel") { 
            //alert("do't hide");  
        }
        else {
            $(".login-panel").hide();
        }
    });
});

当我点击链接时，div 显示并与其他一些元素重叠，而当我点击正文外部时，它就消失了。但问题是当我点击输入框输入用户名时，登录面板 div 会隐藏。为什么div隐藏？任何指导将不胜感激。

Answer 1

http://jsfiddle.net/thirtydot/F4p2x/15/

$(document).ready(function() {
    $("#login").click(function(e) {
        $(".login-panel").toggle();
        e.stopPropagation();
    });

    $(document).click(function(e) {
        if (!$(e.target).is('.login-panel, .login-panel *')) {
            $(".login-panel").hide();
        }
    });
});