JavaScript動畫下拉菜單

我試圖創建一個下拉菜單，充當主菜單的子菜單。子菜單只是一個包含項目/鏈接的div元素。當一個主菜單項被點擊時，子菜單下降並停留在那裏。這很容易，但是如果光標離開子菜單，我希望子菜單可以向後滑動。換句話說，一個簡單的「鼠標」事件。但是，似乎當光標進入子菜單內的其中一個項目時，會觸發'mouseout'事件。這就是你想要的，除非你想到它，因爲光標離開了子菜單元素，即使它沒有離開它的邊界。但是，這確實會造成問題，因爲如果光標移動到子菜單元素的邊界之外，我只想要觸發事件。JavaScript動畫下拉菜單

它真正歸結爲，是有另一個DIV中一個DIV，像這樣：

---------------------------- 
|   DIV-1   | 
|       | 
|  -------------  | 
|  |   |  | 
|  | DIV-2 |  | AREA OUTSIDE DIV-1 
|  |   |  | 
|  |   |  | 
|  |   |  | 
|  -------------  | 
|       | 
|       | 
----------------------------

現在，兩件事情可能會導致DIV-1到火 '鼠標移出' 事件：

光標移動到區域
從DIV-1的boundries內的光標移動到DIV-2

的面積

我的目標是能夠將這兩個事件區分開來，但我一直無法弄清楚。

有沒有人有這個問題很好的解決方案？這似乎是一個常見的功能，所以有人必須解決它。

來源

2009-12-20 Johan Fredrik Varen

我建議你閱讀任何極大數庫（如Drupal的插件）這樣做，而不是在這裏要求說明。 – bmargulies 2009-12-20 21:13:19

不知何故，這聽起來不太吸引我。 – 2009-12-20 22:04:59

由於從子元素泡鼠標懸停事件/傳播給父母，我會使用在子菜單的DIV的onmouseover事件取消了，如果我要在非圖書館路線定時器：

var hideMenuTimer; 
subMenuDiv.onmouseover = function() { 
    window.clearTimeout(hideMenuTimer); 
} 
subMenuDiv.onmouseout = function (evt) { 
    evt = evt || window.event; 
    if ((evt.target || evt.srcElement).id == "subMenuDiv") 
     hideMenuTimer = window.setTimeout(function() { 
      subMenuDiv.style.display = "none"; 
     }, 300); 
}

一個非常簡單的例子，但它應該工作，提供子菜單div的所有子元素正確地將onmouseover事件冒泡到subMenuDiv元素，然後在輪詢之前取消定時器。另外，我已經設置了300ms的超時時間，因爲我認爲最好有這樣的事情，這樣如果你不小心彈出鼠標，你會有一個短暫的窗口讓鼠標在隱藏之前返回。如果你想立即隱藏，將其設置爲0ms也應該可以正常工作。

來源

2009-12-20 21:27:09

太棒了！我仍然在努力將其結合到我的代碼中（使用Prototype），但我可以看到你要去哪裏。它非常好，因爲它還提供了在菜單消失之前延遲的好處。一旦事件冒泡會爲我工作，而不是反對我:)非常感謝你的幫助，安迪。 – 2009-12-20 22:03:57

不用擔心，很高興它幫助:) – 2009-12-20 22:04:50

我喜歡它，當人們downvote不留下評論... – 2009-12-21 10:21:21

http://users.tpg.com.au/j_birch/plugins/superfish/ < - 節省自己的時間，他已經掏出了他的頭髮，你（也許不是真的，不過，不知道）

來源

2009-12-20 21:31:57

謝謝，丹。我一定會更加註意這一點。 – 2009-12-20 21:41:52

這是真棒的傢伙。它在許多其他人失敗的地方成功了。 – 2009-12-21 01:55:02

JavaScript動畫下拉菜單

回答

相關問題