jQuery: Issue with Dropdown Menu Script

Question

So I have a drop down menu:

JSFiddle Link: http://jsfiddle.net/cGt4h/3/

HTML:

<div id="container">
    <ul>
        <li>
            <a class='sign-in' href='#'>Login</a>
            <div id="loginForm" class='log-content'>
                <div>
                    User name:
                    <input type='text' />
                </div>
                <div>
                    Password:
                    <input type='text' />
                </div>
                <div>
                    <input type='button' value='Login' />
                </div>
            </div>
        </li>
    </ul>
</div>

SCRIPT:

$('.sign-in').click(function(e) {
    e.preventDefault();
    $('#loginForm').toggle();
});

$("#loginForm").mouseup(function() {
    return false;
});

$(document).mouseup(function(e) {
    if ($(e.target).parent(".sign-in").length == 0) {
        $('#loginForm').hide();
    }
});

CSS:

#container {margin: 0 auto;width:400px; position:relative; }

#loginForm {
    width:200px;
    background-color:gray;
    color:white;
    padding:10px;
    display:none;
}

li {list-style: none;}

.sign-in {
    background-color:gray;   
    color:white;
    text-decoration:none;
}

.sign-in:hover {background-color:red;}



.open-menu {
    display:block !important;
    left:0;
}

It works fine but when I click on the .sign-in selector the dropdown doesn't close after it has been opened.

Answer 1

Try this:

$('.sign-in').click(function(e) {
    e.stopPropagation();
    e.preventDefault();
    $('#loginForm').toggle();
});

$("#loginForm").mouseup(function() {
    return false;
});

$(document).mouseup(function(e) {
    if ($(e.target).parent(".sign-in").length == 0 && $(e.target).attr("class") != "sign-in") {
            $('#loginForm').hide();
       }
});

Answer 2

That's because your document.mousedown function is causing the form to hide, then your .sign-in click handler is toggling the form, causing it to show. This line:

if ($(e.target).parent(".sign-in").length == 0) {

evals to true, causing the form to hide, add an AND condition:

if ($(e.target).parent(".sign-in").length == 0 && $(e.target).attr("class") != "sign-in") {

Demo: http://jsfiddle.net/cGt4h/4/