Question

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

这是我的代码：

Jquery的：

$("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状态的替代方法。这里的对象是基于完成的状态转换来改变行为。这是通过以下方式完成的：

使用addClass，hasClass和removeClass来标识div的状态。
使用slideDown和slideUp的回调函数更新状态。

在覆盖状态的情况下，mouseleave的条件是hasClass("dropped")为真。

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

Working fiddle

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

HERE IS JSFIDDLE DEMO

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

3 个答案: