jQueryを使用した簡単なメニューのエミュレーション

Question

ドロップダウンメニューをエミュレートする2つのdivタグがあります。外側のdivをクリックすると、内側のdivがその下にいくつかのリンクが表示されます。マウスがどちらかのdivを残しているときにだけ、内側のdivが隠れるようにしたい。

1. は、外側のdivをクリックしてください：ここで

   は、コードが失敗している方法です。

2. 内部divを入力しないでください。
3. マウスを上または左に移動して、外側のdivを終了します。内側のdivはそれ自身を隠すべきですが、そうではありません。

私は外側のdivにフックマウスアウトイベントを持っている必要があることを理解し、私は、私はそれを入力しようとすると、それは、内側のdivを隠し、それを行うとき。

マウスがどちらのdivを残しても、内部divが非表示になるのはどうすればできますか？

<style type="text/css"> 
    div.toggleMenu { position: relative; } 
    div.menu { position: absolute; left: -3px; top: 19px; display: none; } 
</style> 
<div class="toggleMenu"> 
    Toggle Menu 
    <div class="menu"> 
     <ul> 
      <a href="http://www.google.com/"><li>Google</li></a> 
      <a href="http://www.yahoo.com/"><li>Yahoo</li></a> 
      <a href="http://www.bing.com/"><li>Bing</li></a> 
     </ul> 
    </div> 
</div> 
<script type="text/javascript"> 
    // Toggle the menu. 
    $('.toggleMenu').click(function() 
    { 
     $(this).find('.menu').toggle(); 
    }); 

    // Hide the menu when the mouse leaves the tag. 
    $('.menu').mouseleave(function() 
    { 
     $(this).hide(); 
    }); 
</script> 

アップデート：私はマウスオーバーしようとしたとき、それは行の高さは、私のコードを持っていた問題に起因し、内側のdiv消えると私の問題の一部。厳密な検査（IEの1600倍ズーム）の後、私は問題を発見しました。そして、jqueryはプログラムで高さを設定しました。ここで興味のある人のための最終的なコードは次のとおりです。.menu以来

$('.toggleMenu').click(function() 
{ 
    if ($(this).find('.menu').css('display') == 'none') 
    { 
     // The menu needs to be positioned programmatically for the 
     // height due to the differences among browser interpretations of height. 
     var height = $('.toggleMenu').height() - 1; 
     $(this).find('.menu').css('top', height + 'px'); 
     $(this).find('.menu').css('left', '-3px'); 
     $(this).find('.menu').show(); 
    } 
    else 
    { 
     $(this).find('.menu').hide(); 
    } 
}); 

// Hide the menu when the mouse leaves the tag. 
$('.toggleMenu').mouseleave(function() 
{ 
    $(this).find('.menu').hide(); 
}); 

Answer 1

私がしようとするだろう：私は、内側のdiv内のリンクをクリックして下にマウスを移動するとメニュー項目がクリックできないので、内側のdiv要素は、それ自身を隠す http://jsfiddle.net/shaneburgess/k5WRG/1/

// Toggle the menu. 
    $('.toggleMenu').click(function() 
    { 
     $(this).find('.menu').toggle(); 
    }); 

    // Hide the menu when the mouse leaves the tag. 
    $('.toggleMenu').mouseleave(function() 
    { 
     $(this).find(".menu").hide(); 
    }); 

Answer 2

は.toggleMenuの子供はあなたが単に親にmouseleave()イベントを割り当てることができ、それが両方に影響しますです。これは、mouseleave()とmouseout()の主な利点です。デモの作業

$('.toggleMenu').mouseleave(function() 
{ 
    $(this).children('.menu').hide(); 
}); 

：http://jsfiddle.net/AlienWebguy/hNT6P/

Answer 3

をここであなたが必要とするコードは次のとおりです。

    $(".toggleMenu").live({ 
     click: function() { 
     $(this).find('.menu').show(); 
     }, 
     mouseleave: function() { 
     $(this).find('.menu').hide(); 
     } 
    }); 

あなたはトグル機能を使用していたので、あなたがもう一度クリックしない限り、それは再び非表示にしないでしょう。ここでは、http://jsfiddle.net/Skooljester/9Dfjr/10/

アップデートはJSFiddleである：あなたにも.hide();ラインのために行く$('.menu').show();から$(this).find('.menu').show();ラインを短くすることができます。