javascript - jQuery:下拉菜单脚本问题

Question

所以我有一个下拉菜单:

JSFiddle 链接: 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>

脚本:

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

它工作正常，但是当我点击 .sign-in 选择器时，下拉菜单在打开后不会关闭。

Answer 1

那是因为您的 document.mousedown 函数导致表单隐藏，然后您的 .sign-in 单击处理程序切换表单，导致它显示。这一行:

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

评估为 true，导致表单隐藏，添加一个 AND 条件:

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

演示:http://jsfiddle.net/cGt4h/4/