javascript - 下拉菜单几乎可以工作，但并不完美

Question

我做了一个登录下拉菜单，但有时它会滑动 2 次。我找不到问题可能你们中的一些人知道这个问题。

这是我的代码：

查询：

$("div#drop_down").hide();

$("p.login_trigger").mouseenter(function() {
    $("#drop_down").slideDown(250); 
});

$("#drop_down").mouseleave(function() {
    $(this).slideUp(250); 
});

HTML：

<div id="login_area">
    <p class="login_trigger">Login
        <div id="drop_down">
            <form id="" name="" method="post">
                <input type="text" name="username" class="username" /><br />
                <input type="password" name="password" class="password" /><br />
                <input type="submit" name="submit" class="button" value="Login" />
            </form>
        </div>
    </p>
</div>

CSS：

div#login_area p.login_trigger {
display:block;
padding:6px;
background-color:#e2e2e2;
color:#4a4a4a;
-webkit-border-radius:5px;
border-radius:5px;
z-index:99;

}

div#login_area div#drop_down {
position:absolute;
right:20px;
top:40px;
background-color:#e2e2e2;
border:1px solid #e2e2e2;
padding:10px;
-webkit-border-radius: 4px 0px 4px 4px;
border-radius: 4px 0px 4px 4px;
z-index:9;

}

Answer 1

.stop()滑动前插入方法：

$("div#drop_down").hide();

$("p.login_trigger").mouseenter(function() {
    $("#drop_down").stop().slideDown(250); 
});

$("#drop_down").mouseleave(function() {
    $(this).stop().slideUp(250); 
});

Answer 2

这是跟踪登录 div 状态的替代方法。这里的目的是根据完成的状态转换来改变行为。这是通过以下方式完成的：

1. 使用 addClass、hasClass 和 removeClass 来识别 div 的状态。
2. 使用 slideDown 和 slideUp 的回调函数来更新状态。

在覆盖状态的情况下，mouseleavehasClass("dropped")以 true 为条件。

$("p.login_trigger").mouseenter(function() {
    $("#drop_down").slideDown(250, function() { $(this).addClass( "dropped" ); } ); 
});

$("#drop_down").mouseleave(function() {
    if ($(this).hasClass("dropped"))
        $(this).slideUp(250, function() { $(this).removeClass("dropped") }); 
});

工作小提琴

Answer 3

试试下面的代码：

JS

$("div#drop_down").hide();

$("p.login_trigger").mouseenter(function() {
    $("#drop_down").slideDown(250); 
});

$("p.login_trigger").mouseleave(function() {
    $("#drop_down").slideUp(250); 
});

在 css 中进行以下更改：

div#login_area div#drop_down {
    top:47px;    
}

这是 JSFIDDLE 演示