如何讓我的子菜單在jQuery懸停菜單中打開？

Question

我剛剛開始在jQuery上週編寫代碼，並且需要一些幫助來弄清楚如何使菜單正常工作。我有3個選項卡，每個都有自己的菜單。當顯示頁面時，會自動顯示菜單和子菜單。一旦顯示，用戶可以將鼠標懸停在標籤上查看其他子菜單，當它們停止懸停時，顯示最初的子菜單。

我的問題是，雖然我可以向他們展示其他選項卡的子菜單，但我無法讓子菜單保持打開狀態，以供用戶單擊子菜單項。其他教程只有在子菜單嵌套在父元素中時才顯示如何執行此操作，但是我的菜單結構代碼沒有嵌套子菜單（這就是我加入項目時的代碼）。如果用戶在相應的選項卡上懸停，有沒有辦法讓子菜單保持打開狀態？

這裏是我的菜單HTML：

<div id="navigation"> 
     <div id="main-nav"> 
      <div id="kids"><a href="../images/nav1.png"></a></div> 
      <div id="community"><a href="../images/nav2.png"></a></div> 
      <div id="about"><a href="../images/nav3.png"></a></div> 
     </div> 
    </div> 

    <div id="sub-nav"> 
     <ul class="menu-1 requiresJS"> 
      <li><a href="#">Item1</a></li> 
      <li><a href="#">Item2</a></li> 
      <li><a href="#">Item3</a></li> 
      <li><a href="#">Item4</a></li> 
      <li><a href="#">Item5</a></li> 
      <li><a href="#">Item6</a></li> 
     </ul> 
     <ul class="menu-2 requiresJS"> 
      <li><a href="#">Item1</a></li> 
      <li><a href="#">Item2</a></li> 
      <li><a href="#">Item3</a></li> 
      <li><a href="#">Item4</a></li> 
      <li><a href="#">Item5</a></li> 
      <li><a href="#">Item6</a></li> 
     </ul> 
     <ul class="menu-3 requiresJS"> 
      <li><a href="#">Item1</a></li> 
      <li><a href="#">Item2</a></li> 
      <li><a href="#">Item3</a></li> 
      <li><a href="#">Item4</a></li> 
      <li><a href="#">Item5</a></li> 
      <li><a href="#">Item6</a></li> 
     </ul> 

這裏是我的jQuery迄今：

// For JS users, display sub menus by default 
$(".requiresJS").css("display","block"); 

var startMenu 

//hide all sub menus 
$("#sub-nav ul").hide(); 

// check URL for about, community or kids and set startMenu with correct term 
if(window.location.href.indexOf("about") != -1){startMenu = "about"} 
else if(window.location.href.indexOf("community") != -1){startMenu = "community"} 
else{startMenu = "kids"} 

// highlight correct category tab 
$("div#main-nav #" + startMenu).addClass("selected"); 

// show correct starting menu 
$("#sub-nav ul.menu-" + startMenu).show('slide', {direction: 'right'}, 600).effect("bounce", { times:1,direction:"right",distance:13 }, 300); 

// show correct menu on mouseover of div 
$("div#main-nav div").mouseover(function() { 

    $("#sub-nav ul").stop(true, true) 
    $("#sub-nav ul").hide(); 

    var currentId = $(this).attr('id'); 

    $("#sub-nav ul.menu-" + currentId).show();  
}); 

$("div#main-nav div").mouseover(function() { 
     $("#sub-nav ul").stop(true, true) 
     $("#sub-nav ul").hide(); 
     var currentId = $(this).attr('id'); 
     $("#sub-nav ul.menu-" + currentId).show();  
}); 

Answer 1

我也有類似的情況，並通過鼠標懸停事件分割開的mouseenter解決它，鼠標事件。只是僞/輪廓，但與你的情況下，嘗試這樣的：

$("div#main-nav div").mouseenter(function() { 
    // Check if sub menu is open, return if it is allready open 
    // (I add a 'menu_open' class to sub menu when it is opened) 

    // Code to hide open submenues 
    // Code to open selected submenu  
}); 

然後用鼠標離開和事件的toElement屬性來檢查的MousePointer哪裏去，如果去了一個子菜單，什麼也不做，如果不要關閉所有的子菜單。請注意，您還需要在子菜單上連接鼠標事件。像這樣的：

$("#main-nav div").mouseleave(function (event) { 
    var toElem = $(event.toElement); 
    if (toElem.closest("div.sub-nav").id=="subnav") return; // Prob nicer way to do this...point is to check if mouse enters a submenu, and if so stay open. 
    // Close all open submenues, e.g. 
    $("#sub-nav ul").hide(); 
}); 

$("#subnav ul").mouseleave(function (event) { 
    var toElem = $(event.toElement); 
    if (toElem.closest("div.sub-nav").id=="subnav") return; // Check if entering submenu 
    if (toElem.closest("div#main-nav")) return; // Check if entering main menu 
    // Close all open submenues, e.g. 
    $("#sub-nav ul").hide(); 
}); 

希望這對你有一些幫助。剛剛解決了這個問題，所以沒有時間去研究它，我相信有更好，更漂亮的方法來做到這一點。

Answer 2

我有類似的情況，不幸的是我無法重新格式化我的整個菜單，以適應'正確的'父/子結構。

如果您只是在選擇器中調用子菜單，它將在懸停狀態期間保持「打開」狀態。

http://jsfiddle.net/K5P9Z/

示例 -

jQuery(document).ready(function($) { 

$('#kids, .menu-1').hover(function() { 
    $('.menu-1').show(); 
}, function() { 
    $('.menu-1').hide(); 
}); 
$('#community, .menu-2').hover(function() { 
    $('.menu-2').show(); 
}, function() { 
    $('.menu-2').hide(); 
}); 
$('#about, .menu-3').hover(function() { 
    $('.menu-3').show(); 
}, function() { 
    $('.menu-3').hide(); 
}); 

});​