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

我希望這會清除你的懸停的問題。