in body click div hide, when i click on div also it hide

Question

I want to show a div on link click and hide if click outside the link or 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>

initially div is hidden. and script is

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

when I click on link div shows and overlaps some other elements, and when I click outside the body it dies. But the problem is when I click on input box to enter username login-panel div get hides. why div hide? any guidance will be appreciated.

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

Answer 2

You should do it like this:

http://jsfiddle.net/VWENB/1/

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

    }
});​