如何讓我的下拉菜單仍然下降？

Question

我目前正在訪問的網站位於： http://counterbeing.com

我試圖解決的問題是，當你在「類別」按鈕來運行你的鼠標，子菜單項彈出，但在你點擊它們之前就消失了。

我試過了各種各樣的東西。一方面，我試圖將子菜單項目包裝的div定義爲可能會觸發動畫的東西，但這似乎不起作用...

這裏是javascript文件， m使用來抓取兩個圖層。我把它分成了兩層，因爲其中一層有點透明。

$(document).ready(function() { 
($("div#CategoriesLink")||$("div#CategoryButtonHolder")).hover(function(){ 
    $("div#navdrop").animate({ 
     top: "0px" 
    }) 
    $("div#CategoryButtonHolder").animate({ 
     top: "0px" 
    }) 
}); 
$("div#CategoriesLink").mouseout(function(){   

    $("div#navdrop").animate({ 
     top: "-162px" 
    }) 
    $("div#CategoryButtonHolder").animate({ 
     top: "-162px" 
    }) 
}); 
}); 

Answer 1

因此，如果您在CategoryButtonHolder上使用rgba背景，首先您不需要使用兩個div。

接下來，您正在使用mouseout事件處理程序來爲備份的div設置動畫效果。所以每次你離開按鈕時，你都會激活鼠標。嘗試將mouseout處理程序移至CategoryButtonHolder。

$("#CategoryButtonHolder").mouseout(function(){ 
    $(this).animate({ 
     top: '-'+$(this).outerHeight() 
    }); 
)}; 

Answer 2

懸停，一個很好的插件，解決了這類問題是hoverintent插件：http://cherne.net/brian/resources/jquery.hoverIntent.html;你可以讓它等待並保持X毫秒的時間，然後真的很順利。

HTH。