0

当用户将鼠标悬停在登录框时，下面的脚本将创建淡入淡出效果

<script>
$("#login").hover(function() {
    $("#loginForm").slideToggle('500').css('display', 'block');
}, function() {
    $("#loginForm").slideToggle('500')
});
</script>

但是当我想从中选择我的电子邮件时<input type="name" name="email_address" />

在此处输入图像描述

这个 div#loginForm将自动关闭：

在此处输入图像描述

那么如何在用户从自动完成列表中选择他们的电子邮件地址时始终显示此框？

此问题仅在浏览器 mozilla firefox 中发生。

仅供参考：更改为<input type="name" name="Email" />.. 这将列出您的 gmail 电子邮件地址

提琴手

4

3 回答 3

1

我重写了你的 HTML 和脚本。如果文本框仍然打开，我将保持登录框打开focus。也改为slideToggle你slideUp/slideDown可以试试这个

HTML

<form>
<p id="login">     
    <span class="label">Login Here</span>       
    <span id="loginForm">        
        <span class="form-elements">
            <span class="form-label">Name:</span>
            <span class="form-field"><input type="name" name="email_address"  id="email"/></span>                        </span>        
        <span class="form-elements">
            <span class="form-label">Password:</span>
            <span class="form-field"><input type="password" id="pass"/></span>                    </span>        
        <span class="form-elements">
            <span class="submit-btn"><input type="submit" value="Submit" /></span>     
        </span>

    </span>          
</p>
</form>

脚本

$("#login").hover(function() {
    $("#loginForm").slideDown('500').css('display', 'block');
}, function() {
    if($('#email').is(":focus") || $('#pass').is(":focus")) return false;
    $("#loginForm").slideUp('500')
});

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

于 2013-08-26T08:01:34.053 回答
1

由于下拉菜单是由浏览器创建的，jQuery 认为鼠标离开#login并会再次向上滑动。为了防止这种情况发生，您可以为slideUp动画添加延迟。我创建了一个小提琴来向您展示我的意思。

$("#login").hover(function () {
    $("#loginForm").clearQueue().slideDown(500);
}, function () {
    $("#loginForm").delay(1500).slideUp('500');
});

注意clearQueue()方法。这将确保当用户选择了一封电子邮件并将鼠标悬停在该元素上时#login，它将防止slideUp()发生这种情况。

于 2013-08-26T08:02:23.510 回答
0

我认为没有 500 毫秒会更好：

$("#loginForm").slideToggle().css('display', 'block');
于 2013-08-26T07:45:52.037 回答