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にmouseoverイベントを分割することによってそれを解決し、 mouseleaveイベント。その後あれば、何もしない、マウスポインタがどこに行ったことは、サブメニューに行っている場合、チェックするためにmouseleaveとそのイベントのtoElementがプロパティを使用

$("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  
}); 

：ちょうど擬似コード/アウトラインが、あなたのケースでのようなものを試してみてくださいすべてのサブmenuesを閉じないでください。サブメニューにマウスを置いたままにする必要があることに注意してください。このようなもの：

$("#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(); 
}); 

});​