jquery下拉菜单在悬停时反复打开

Question

我在jquery菜单中遇到了一些问题。我工作得很好，但如果你将鼠标悬停在按钮上3次或4次，菜单将重复扩展3次或4次，你可以等待它退出。有人可以告诉我如何阻止它吗？这里是我正在使用的JavaScript：

<script type="text/javascript"> 
$(function() { 
     $('#dropMenu .level1 .submenu.submenu').hover(function() { 
$(this).find('ul.level2,.level3 li,.level4 li,.level5 li,.level6 li').stop(true, true).hide(1000); 
$(this).find('ul.level2,.level3 li,.level4 li,.level5 li,.level6 li').stop(true, true).show(1000); 
}, function() { 
$(this).find('ul.level2,.level3 li,.level4 li,.level5 li,.level6 li').stop(true, true).show(1000); 
$(this).find('ul.level2,.level3 li,.level4 li,.level5 li,.level6 li').stop(true, true).hide(1000); 
});}); 
</script> 

任何有识之士将不胜感激。

感谢

Answer 1

你可以添加一个变量来表示当动画处于活动状态，不要让一个又一个开始，如果前一个还没有完成。

var isAnimating = false; 
$(function() { 
     $('#dropMenu .level1 .submenu.submenu').hover(function() { 
if (!isAnimating) { 
    $(this).find('ul.level2,.level3 li,.level4 li,.level5 li,.level6 li').stop(true, true).hide(1000); 
    $(this).find('ul.level2,.level3 li,.level4 li,.level5 li,.level6 li').stop(true, true).show(1000); 
    isAnimating = true; 
} 
}, function() { 
$(this).find('ul.level2,.level3 li,.level4 li,.level5 li,.level6 li').stop(true, true).show(1000); 
$(this).find('ul.level2,.level3 li,.level4 li,.level5 li,.level6 li').stop(true, true).hide(1000); 
isAnimating = false; 
});}); 

Answer 2

嘿罗伯特，我讨厌当一个简单的悬停动作意想不到的结果。 随着时间的推移，我开发了一些方法来解决元素的轻弹。

假设你有这样的菜单结构;

<div id="nav"> 
    <ul> 
    <li> 
     <a href="...">Home</a> 
     <ul> 
     <li><a href="...">New Products</a></li> 
     <li><a href="...">All Products</a></li> 
     <li><a href="...">Specials</a></li> 
     <li><a href="...">Search</a> 
      <ul> 
      <li><a href="...">Site</a></li> 
      </ul> 
     </li> 
     </ul> 
    </li> 
    </ul> 
</div> 

CSS这样的东西;

<style> 
    #nav ul li ul{ 
    display:none; 
    } 
</style> 

jQuery是这样的;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script> 
<script> 
    $("#nav ul li").each(function(){ 
    $(this).mouseenter(function(){ 
     $(this).find("ul:first").show(); 
    }).mouseleave(function(){ 
     $(this).find("ul:first").hide(); 
    }); 
    }) 
</script> 

注意，我在这个例子中使用.mouseenter()和.mouseexit()，而不是.hover()。

为什么.hover()在本例中没有做到您所期望的？ 悬停仅适用于单个元素，当您将鼠标悬停在元素内的某个元素上时，它是一个新元素。

一个很好的例子是jQuery API Documentation

我希望这会清除你的悬停的问题。