jquery - メインメニューのマウス出力時にサブメニューが表示されない

Question

これはかなり簡単なようですが、ここで関連する質問を読んで問題を解決できませんでした。私が持っている：

<ul class="main-menu"> 
    <li>Letters</li> 
    <li>Numbers</li> 
</ul> 

<ul class="sub-menu hidden"> 
    <li>A</li> 
    <li>B</li> 
    <li>C</li> 
</ul> 

は私が.SUB-メニューが.main-メニューのマウスオーバーで表示され、マウスが.mainとサブの両方の上にあるときに、目に見えるおきたいです。私は、メインメニューのマウスアウト時に

$(".main-menu, .sub-menu").hover(
    function(){ 
     $('.sub-menu').hide().removeClass('hidden').slideDown('fast'); 
    }, function(){ 
     $('.sub-menu').slideUp('fast'); 
    } 
); 

しかし、マウスアウトが、私はサブメニューの中にそれをマウスアウト、そのサブメニューが隠されているにもかかわらず、解雇されます。

提案がありますか？ HTMLの再構築はオプションではありません。

Answer 1

：http://jsfiddle.net/aY7wW/ - と、さらに「HTMLの再構成はオプションではない」と言ったときには、各サブメニューとそのメインメニュー項目を関連付けるための属性の追加を提案できないことを意味していました。この制限内で作業するために、サブメニューul要素インデックスに関連するメインメニューのli要素インデックスを使用しました（明らかに、サブメニューが対応するメインメニュー項目と同じ順序で定義されている場合にのみ機能します） 。あなたはそれが多少のコード​​を単純化するいくつかのid属性か何かを追加し、とにかく可能性がある場合：

var timerId, 
    $mainMenuItems = $(".main-menu li"), 
    $subMenus = $(".sub-menu"); 

$mainMenuItems.hover(
    function(){ 
     clearTimeout(timerId); 
     $subMenus.slideUp('fast'); 
     $($subMenus[$mainMenuItems.index(this)]).hide() 
               .removeClass('hidden') 
               .slideDown('fast'); 
    }, function(){ 
     var i = $mainMenuItems.index(this); 
     timerId = setTimeout(function(){$($subMenus[i]).slideUp('fast');},500); 
    } 
); 
$subMenus.hover(
    function() { 
     clearTimeout(timerId); 
    }, 
    function() { 
     $(this).slideUp('fast'); 
    } 
); 

を基本的な考え方は、メインメニューからマウスアウトでサブメニューを非表示に遅らせるようにsetTimeout()を使用することです。これにより、マウスをサブメニューの上に移動する時間が与えられ、タイムアウトがクリアされると、隠されなくなります。次に、サブメニューからマウスを移動すると、そのメニューは非表示になります。しかし、異なるメインメニュー項目の間でマウスを動かすことを可能にし、初期ホバー時には、未解決のタイムアウトをクリアし、以前に表示されたサブメニューを隠すので、正しいサブメニューのみが表示されます。私は500msの遅延を使用しましたが、明らかにあなたが自然に感じるものに設定することができます。

の作業のデモ：http://jsfiddle.net/aY7wW/

Answer 2

メインメニューとサブメニューの両方をdivに入れて、divにホバーイベントを入れてみてください。

Answer 3

どのようなものについて：以下は、私がここに示されてきたようにあなたは、何かを「数字」メイン・メニュー項目に行くために、第2のサブメニューがあることを想定してい

$(".main-menu").mouseover(function() { 
    $('.sub-menu').slideDown('fast').click(function(){ 
     $(this).slideUp('fast'); 
    }); 
});