jQuery hover() hide/show cause bounce

Question

Это простое меню скрыть/показать: Когда вы наводите указатель на элемент списка, скрипт показывает любые неупорядоченные списки, которые являются дочерними элементами этого элемента списка, а затем отображает. 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'); } 
    ); 
}); 

Он работает в основном как это должно быть. За исключением случаев, когда вы перемещаете мышь из элемента списка и оставляете ее в пространстве, где должен появляться суб-список (перед тем, как подсвечник заканчивается), вы застряли в цикле show/hide/show/hide, пока вы не переместите указатель мыши.

Я попытался исправить это, используя setTimeout() как в функции аргумента mouseover, так и в функции аргумента mouseout. Я также пытался использовать условия, чтобы проверить, скрыт ли подсписчик в этих аргументах. Я не вижу разницы в производительности.

Любой

Answer 1

Это является общей проблемой, проверьте Hover Intent

Answer 2

Я думаю, что это улавливает ваше мероприятие MouseOut перед показом подменю. Попытайтесь быстро изменить скорость показа/скрытия. Но это не решение.

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(); 
     } 
    });