jqueryは、サブナブに移動するとマウスオーバーを発生します。

Question

サブナビを持つnavがあります。ユーザーがnavのliの上を移動すると、それぞれのliのサブナビが表示されます。私はnavからマウスをsubnavに移動させることでmouseoutが発生するという問題が発生しています。私はタイムアウトを実装する必要があると思っていましたが、開始する場所が不明で、動作させることができません。代わりにmouseover/mouseoutのjsのフィドル以下...

http://jsfiddle.net/Nhvc6/

Answer 1

てみてください。これにより

timeoutHandle = setTimeout(navMouseOut($subnav), 300); 

は：

timeoutHandle = setTimeout(navMouseOut, 300, $subnav); //Works for all but IE!! 

これは、関数navMouseOutから参照を渡します。 navMouseOutパラメータ$subnavもまた、第3のパラメータとしてsetTimeoutに渡されます。 setTimeoutという3番目のパラメータはIEによって無視されることに注意してください。しかし、すべての最新のブラウザで動作します。

あなたはクロスブラウザの比較が必要な場合、あなたはnavMouseOut

timeoutHandle = setTimeout(function() { 
    navMouseOut($subnav); 
}, 300); 

Updated Fiddle

詳細情報

• Set timeout MDN

を起動するために、 setTimeoutに匿名関数を渡す必要があります0

Answer 2

2つのこと、あなたが使用する必要があるすべてのmouseenter/mouseleaveの最初の（jQueryのに利用できるおかげで）を参照してください。子要素に移動するときにこれらは起動しません。 thisおよびthisを参照してください。

第2に、タイマーを実装するか、すばらしいjQuery hoverIntent plug-inを使用することができます。置換

Answer 3

適切なCSSの配置に応じてサブナビの動作が気にかからなければ、この場合は完全にタイマーをスキップしてください。

<ul id="nav"> 
<li>Howdy 
    <ul class="subnav"> 
     <li>Howdy</li> 
     <li>Howdy</li> 
     <li>Howdy</li> 
    </ul> 
</li> 
<li>Howdy 
    <ul class="subnav"> 
     <li>Howdy</li> 
     <li>Howdy</li> 
     <li>Howdy</li> 
    </ul> 
</li> 

CSS：

#nav { 
margin-top: 0 !important; 
width: 200px; 
} 

#nav ul { 
    list-style: none; 
    margin: 0; 
    padding: 0; 
} 

#nav li { 
    position: relative; 
    display: block; 
    margin: 0 0 3px 0; 
    border:thin solid black; 
} 

.subnav { 
    position: absolute; 
    margin: none; 
    left:198px; 
    top:-1px; 
    width: 200px; 
    display: none; 
} 

Javascriptを：ここでは何ができるかのアイデアは

HTML（あなたがjFiddleていたものから大幅に単純化された）である

$('#nav li').mouseenter(function(event) { 
    $(this).children().show(); 
}); 

$('#nav li').mouseleave(function(event) { 
    $(this).children().hide(); 
}); 

ここで重要なのは、navリスト項目とそのサブナブリストが接触している限り、サブナブが 'li'の一部であるため、 'mouseleave'または 'mouseout'イベントは 'li'で発生しません。サブナビまたはその親「li」のいずれかを離れると、「mouseleave」イベントが発生します。 jFiddleでうまく働いた。

上記のように、あなたのサブナビにも「ul」を個人的に使用したいと思います。意味的には、私にはもっと意味があります。