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>

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

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

Answer 1

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

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

evals to true，导致表单隐藏，添加AND条件：

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

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

Answer 2

试试这个：

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

jQuery：下拉菜单脚本问题

2 个答案: