在body中点击div hide,当我点击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显示并重叠其他一些元素时,当我点击身体外它就会死亡.但问题是当我点击输入框输入用户名login-panel 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();
        }
    });
});