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 に答える