JQueryドロップダウンの動作

Question

JQueryの本当に新しい.. 2時間のような新しい。このようなログインボックスのドロップダウンメニューを書き始めた： HTML：

$('#loginButton').live('hover', function() { 
    login_drop(); 
}); 

function login_drop(){ 
$('#loginBox').fadeIn(); 

} 

$('#loginButton').live('hover', function() { 
    login_away(); 

}); 

function login_away(){ 
$('#loginBox').fadeOut(); 
} 

をしてから、このHTMLのDIVは直接の下に表示されます：あなたはそれの上に置くと

<button id="loginButton">Login</button> 

、このjQueryの走りますボタン：

<div id="loginBox">     
<label for="email_B">Email Address</label> 
<input type="text" name="email_B" id="email_B" /> 
<label for="password">Password</label> 
<input type="password_B" name="password_B" id="password_B" /> 
<input type="submit" id="login" value="Sign in" /> 
<label for="checkbox"><input type="checkbox" id="checkbox" />Remember me</label> 
<span><a href="#">Forgot your password?</a></span> 
</div> 

とそのDIVのCSSはこれです：

#loginBox { 
    position:absolute; 
    top:70px; 
    right:100px; 
    display:none; 
z-index:1; 
} 

これはすべて動作しますが、その動作は悪臭を帯びます。どうすればボタンの上にマウスを置いて、新しく登場したDIVにマウスを置くことができますし、divが消えることもなくなります。

申し訳ありません。 おかげでみんな！

--------------------------------編集者の名前---------- これを読んだ皆さんのために、ユーザーがどのように対話したいかによって、この作業を行う方法はたくさんあります。

ここは方法1です。マウスをログインボタンから離すと、ログインボックスがフェードアウトします。これは、動作させるための簡単な方法です。この回答は、あなたがこれを好きなら、下の彼の答えを上に置くことを頼むelclanrsのおかげです。

はJQuery： http://jsfiddle.net/j4Sj5/4/ をあなた場合：

$(function(){ 
$('#loginButton').mouseenter(function(){ $('#loginBox').fadeIn(); }); 
$('#login').mouseout(function(){ $('#loginBox').fadeOut(); }); 
}); 

HTML：

<div id="loginBox">     
<label for="email_B">Email Address</label> 
<input type="text" name="email_B" id="email_B" /> 
<label for="password">Password</label> 
<input type="password_B" name="password_B" id="password_B" /> 
<input type="submit" id="login" value="Sign in" /> 
<label for="checkbox"><input type="checkbox" id="checkbox" />Remember me</label> 
<span><a href="#">Forgot your password?</a></span> 
</div> 

CSS：ジャレッドFarrishがここで行ったように2が追加され

#loginBox { 
position:absolute; 
top:70px; 
right:100px; 
width:200px; 
height:200px; 
display:none; 
z-index:99; 
background:url(../images/162.png); 
} 

WAYはキャンセルボタンで彼の答えのように、彼の下で彼を投票してください！

とWAY 3は私が今試みているもので、ユーザーフレンドリーで派手なものでなければなりません。私はそれが正しく動作するようになると私はポストバックします！

Answer 1

EDIT

（後発EDIT：ショーログイン要素にのみマウスオーバーした後に非表示にするには、タイムアウト、プラスいくつかの他の更新プログラムを追加しました。）

私はまだログインフォームを処理するためにmouseenterとmouseoutを使用して考えている間、ユーザビリティの観点から行くには正しい方法ではありません、以下のジム・ジェファーズが記述との落とし穴のいくつかを処理しようとしているものを示すコードですアプローチ：

var setuplogindisplay = function(){ 
    var $loginbox = $('#loginBox'), 
     $loginshow = $('#loginShow'), 
     $logincontainer = $('#loginContainer'), 
     $cancellogin = $('#cancelLogin'), 
     keeptimeout, 
     closetimeout; 

    var keepDisplay = function(){ 
     clearAllTimeouts(); 
     keeptimeout = setTimeout(loginHide, 2000); 
    }; 

    var loginDisplay = function(){ 
     clearAllTimeouts(); 
     if ($loginbox.is(':hidden')) { 
      $loginbox.fadeIn(); 
     } 
    }; 

    var loginHide = function(){ 
     clearAllTimeouts(); 
     if ($loginbox.is(':visible')) { 
      if (!$(this).is('#cancelLogin')) { 
       closetimeout = setTimeout(function(){ 
        $loginbox.fadeOut(); 
       }, 1500); 
      } else { 
       $loginbox.fadeOut(); 
      } 
     } 
    }; 

    function clearAllTimeouts() { 
     if (keeptimeout) { 
      clearTimeout(keeptimeout); 
     } 
     if (closetimeout) { 
      clearTimeout(closetimeout); 
     } 
    } 

    $loginshow.mouseover(loginDisplay); 
    $loginshow.mouseout(keepDisplay); 
    $logincontainer 
     .mouseout(loginHide) 
     .children() 
      .mouseover(loginDisplay) 
      .mouseout(keepDisplay); 
    $cancellogin.click(loginHide); 
}; 

$(document).ready(setuplogindisplay); 

http://jsfiddle.net/j4Sj5/19/

注意、あなたはmouseout sが発火するという事実を処理するために譲歩をしなければならないとき#logincontrol要素内の要素にマウスポインタを重ねます。私はmouseenterイベントでloginDisplay()（これはmouseoutで動作しますが、mouseenterではもっと論理的に意味があります）ということでこれを処理します。

---

それにアクセスし、あまりにも巧妙なまたは過剰エンジニアリングユーザーエクスペリエンスを取得しないようにしようしようとしたとき、私は、フォームの心の使いやすさを保つでしょう。検討してください：

<input type="button" id="cancelLogin" value="Cancel" /> 

他の要素のアクションではなくフォームを閉じる/非表示にするには、これを使用します。 mouseoutのようなイベントでクローズフォームアクションを実行すると、誤ってまたは意図せずにマウスを動かしたときにユーザーが悪化し、ログインフォームが閉じられたことがわかります。フォームIMOには、ユーザーの選択に応じてイベントを非表示にするコントロールが必要です。

<span id="loginButton">Show Login</span> 
<div id="loginBox">     
    <label for="email_B">Email Address</label> 
    <input type="text" name="email_B" id="email_B" /> 
    <label for="password">Password</label> 
    <input type="password_B" name="password_B" id="password_B" /> 
    <input type="submit" id="login" value="Sign in" /> 
    <input type="button" id="cancelLogin" value="Cancel" /> 
    <label for="checkbox"><input type="checkbox" id="checkbox" />Remember me</label> 
    <span><a href="#">Forgot your password?</a></span> 
</div> 

$(document).ready(function(){ 
    var $loginbox = $('#loginBox'), 
     $button = $('#loginButton'), 
     $cancellogin = $('#cancelLogin'); 

    var loginDisplay = function(){ 
     $loginbox.fadeIn(); 
    }; 

    var loginHide = function(){ 
     $loginbox.fadeOut(); 
    }; 

    $button.click(loginDisplay); 
    $cancellogin.click(loginHide); 
}); 

http://jsfiddle.net/j4Sj5/4/

Answer 2

ホイールを改造する代わりに、hoverintentのようなjqueryプラグインを調べることをおすすめします。それはあなたのための仕事のほとんどを行います。

関連ノートでは、.live（）はv1.8からjqueryで廃止予定です。代わりに.on（）を使用する必要があります。

Answer 3

これは動作するはずです。さらにlive()は不要ですが、代わりにon()が推奨されています。また、簡単なfadeIn()/fadeOut()ためにこれらの機能を必要としない：

$('#loginButton').mouseenter(function(){ $('#loginBox').fadeIn(); }); 
$('#loginBox').mouseout(function(){ $(this).fadeOut(); }); 

Answer 4

ああ、これは自分で行うための素晴らしいものです。それを行う方法は次のとおりです。まず、ライブはあなたがする必要があることのために過度のものかもしれません。ここでの本当のトリックはあなたができるだけ早くあなたのマウスがボタンをオフに移動すると効果からマウスをトリガすることである

$('#loginButton').hover(function() { 
    $('#loginBox').fadeIn(); 
}), function(){ 
    $('#loginBox').fadeOut(); 
}); 

：あなたのケースでは、jQueryのでは、標準のホバーイベントハンドラを使用することができます。これにより、マウスがログインボックスに入るとメニューが消えます！

実際にやりたいことは、含まれている要素のホバー効果を処理することです。あなたの#loginButtonと#loginBoxがそうのような親要素に含まれていることを確認します：

<div id="loginControl"> 
    <button id="loginButton">Login</button> 
    <div id="loginBox">...</div> 
</div> 

その後loginButtonの親にイベントを添付：

$('#loginButton').parent().hover(function() { ... }), function(){ ... }); 

また、あなたが＃で絶対位置を使用している場合、 loginBoxあなたも、あなたがポジションを使用していることを確認したいと思う：相対して、それは親が（私の例では#loginControl）だ上：

#loginControl{ position: relative; } 

あなたはどんな問題があるなら、私に教えてください。

は、もっと高度な行き方：

をあなたはさらに一歩これを取るしたい場合は、単純なタイムアウトを実装する試すことができます。私は誤ってドロップダウンからマウスを離したときに消えるドロップダウンメニューを持つことは使い勝手が悪いことを早期に知った。これを修正するために、ユーザーのマウスが非常に短い時間（たとえば250〜350ms）内にドロップダウンに戻ると、ドロップダウンが隠れるのを防ぐ簡単な遅延を追加します。https://gist.github.com/71548