0

ログインドロップダウンメニューを作ったのですが、2回スライドすることがあります。問題を見つけられないかもしれません。問題を知っている人もいます。

ここに私のコードがあります:

Jクエリ:

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

}

4

3 に答える 3

1

これは、ログイン div の状態を追跡する代替手段です。ここでの目的は、完了した状態遷移に基づいて動作を変更することです。これは次の方法で実現されます。

  1. addClass、hasClass、および removeClass を使用して、div の状態を識別します。
  2. 状態を更新するには、slideDown と slideUp のコールバック関数を使用します。

カバーされた状態で、mouseleave はhasClass("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") }); 
});

働くフィドル

于 2013-07-24T12:21:55.187 に答える
0

次のコードを試してください。

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 デモはこちら

于 2013-07-24T12:28:40.330 に答える