問題與鼠標懸停，鼠標移出在JQuery的菜單

我試圖仿效http://www.clydeproperty.com/我想將鼠標懸停在菜單中的一個菜單的，使一個jQuery.load()調用來獲取菜單選項，然後slideDown()包含選項的股利。問題與鼠標懸停，鼠標移出在JQuery的菜單

然後，我想讓菜單保持打開狀態，直到您移動到頁面上的其他任何位置，除了進入打開菜單：在下面的示例中，這將是menuOptions div。

<div class="menu"><a id="Products" href="#">Products</a></div> 
<div class="menu"><a id="Services" href="#">Services</a></div> 
<div class="menu"><a id="Contact" href="#">Contact Us</a></div> 
<div id="menuOptions"></div>

我目前使用以下jQuery的顯示菜單：

$('.menu').mouseover(function(){ 
    $('#menuOptions').load('./MenuOptions.html #' + $(this).children('a').attr('id'), function(){ 
     $('#menuOptions').stop().slideDown(1200); 
    }); 
});

我已經使用$('.menu').mouseout事件試過，但這個當然會火的，只要你進入菜單！這讓我瘋狂，所以任何幫助都非常感謝。

我想過的一種方式是添加一個幾乎否定的選擇器來爲除了.menu和#menuOptions之外的所有內容添加一個mouseover事件，但我知道這遠非最佳解決方案！

來源

2009-10-26 Fermin

爲什麼不把mouseout事件附加到#menuOptions標記上，因爲這是你希望保持打開的狀態，直到你移動到頁面的其他位置？

要確保您一次沒有打開多個菜單，請將trigger()事件附加到其他頂級菜單項（即產品，服務等），以便打開任何#menuOptions div標籤在你想要的一個打開之前關閉。這個觸發器會觸發每個#menuOptions div的mouseout事件。

來源

2009-10-26 20:59:31

如果你將鼠標懸停在一個.menu打開一個，但沒有進入它，那麼mousemen就不會打開#menuOptions，所以mouseout永遠不會觸發？ – Fermin 2009-10-26 21:07:43

這就是爲什麼你需要使用trigger（）函數。看看這裏：http://docs.jquery.com/Events/trigger – 2009-10-26 21:15:46

使用trigger（）函數，你可以有效地告訴jQuery，「嘿！當你看到這個項目的一個事件，爲這個事件發起事件項目在那裏「。 – 2009-10-26 21:17:03

我會把一個單獨的.menuOptions div放在每個.menu div（絕對位置）。這樣你可以加載每個特定的一個，並使用mouseout事件來關閉它自己。你將需要給它一個類而不是一個id，因爲它們會有幾個。

然後使用jQuery的。菜單類中找到DIV，如：

$('.menu').find('.menuOptions')

希望有所幫助。

來源

2009-10-26 20:49:16 wows

我試圖避免使用1菜單選項，以便我可以加載AJAX選項，但如果這是最好的解決方案，那麼我會檢查出來。謝謝。 – Fermin 2009-10-26 20:54:01

問題與鼠標懸停，鼠標移出在JQuery的菜單

回答

相關問題