jQuery hover（）hide/showによってバウンスが発生する

Question

単純なhide/showメニューです。 リストアイテムをマウスオーバーすると、そのリストアイテムの子である順序付けられていないリストが表示されます。 CSSは、このサブリストを、リストされたリスト項目のすぐ右に置きます。 マウスオーバーすると、順序付けられていないリストが再び非表示になります。

HTML：

<div class="menu-header-category-menu-container"> 
    <ul id="menu-header-category-menu" class="menu"> 
    <li id="menu-item-58"><a href="?cat=3">Parent Category I</a> 
     <ul class="sub-menu"> 
     <li id="menu-item-59"><a href="?cat=6">Child Category I</a></li> 
     <li id="menu-item-60"> 
      <a href="?cat=7">Child Category II</a> 
      <ul class="sub-menu"> 
      <li id="menu-item-61"><a href="?cat=9">Grandchild Category I</a></li> 
      </ul> 
     </li> 
     </ul> 
    </li> 
    <li id="menu-item-62"><a href="?cat=4">Parent Category II</a></li> 
    <li id="menu-item-63"> 
     <a href="?cat=5">Parent Category III</a> 
     <ul class="sub-menu"> 
     <li id="menu-item-64"><a href="?cat=8">Child Category III</a></li> 
     </ul> 
    </li> 
    <li id="menu-item-57"><a href="?cat=1">Uncategorized</a></li> 
    </ul> 
</div> 

CSS：

li { 
    width: 150px; 
    border: 1px solid black; 
    background-color: aqua; 
    list-style-type: none; 
    position: relative; 
} 

ul.sub-menu { 
    position: absolute; 
    left: 110px; 
    top: 0px; 
    display: none; 
} 

はJavaScript：

$(document).ready(function() { 
    $('li').hover(
     function() { $(this).children('ul').show('slow'); }, 
     function() { $(this).children('ul').hide('slow'); } 
    ); 
}); 

それは主にそれが必要のように動作します。あなたがリスト項目の上からマウスを移動し、サブリストが表示されるはずのスペースに残した場合（サブリストの表示が終了する前）は、表示/非表示/表示/非表示の繰り返しループで停止するまでマウスカーソルを離します。

mouseover引数の関数とmouseout引数の関数の両方で、setTimeout（）を使用してこれを修正しようとしました。また、条件を使ってサブリストがそれらの引数に隠されているかどうかをチェックしようとしました。パフォーマンスの違いは見られません。

誰でも

Answer 1

これは共通の問題である、Hover Intent

Answer 2

は、私はそれがサブメニューを表示する前に、あなたのマウスアウトイベントをキャッチだと思います。表示/非表示の速度を高速に変更してみてください。しかし、これは解決策ではありません。

Answer 3

をチェックしてください。このコードはまた、

var myVar; 
$(".liveUser").on({ 
     mouseenter: function() { 
     myVar = setTimeout(function(){ //optional delay 
      //$(".userDetail").stop().hide().fadeIn(); 
       $(".userDetail").stop().hide().show(); 
       }, 400); 
     }, 
     mouseleave: function() { 
      clearTimeout(myVar); 
      //$(".userDetail").stop().fadeOut(); 
      $(".userDetail").stop().hide(); 
     } 
    });