jQuery hide mouseout on

Question

このアイテムには多くの投稿がありましたが、適切な解決策が見つかりませんでした。申し訳ありませんが既にどこかで答えられている場合。

私が欲しいもの

： 私はclickイベントがhref元素から発射されたときに開く私のメニュー項目、とDIVを持っています。 マウスがDIV要素から外れていて、href要素を超えていないときに、メニューを非表示にしたいと思います。これまでのところ、私はhref要素をクリックすると閉じることができます。

だから、私のjQueryのは、次のようになります。

$("#menu_opener").click(function() { 
      if ($("#menudiv").is(":hidden")) { 
       $("#menudiv").slideDown("slow"); 
      } else { 
       $("#menudiv").hide(); 
      } 
     });  

そして、私のHTMLは次のようになります。事前に

<div> 
<a href="#" id="menu_opener">Menu</a> 
</div> 
<div id="menudiv" style="position: fixed; background-color: white; display: none;"> 
    <a href="#" id="A1">Page 1</a><br /> 
     <a href="#" id="A2">Page 2</a><br /> 
    <a href="#" id="A3">Page 3</a><br />       
</div> 

ありがとう！

Answer 1

編集：初めてご質問を誤解しました。私はこれを数回実行しなければなりませんでした。そして、メニューを常にhref要素と重なるように移動しました。 href OR href要素がホバリングされている場合は、メニューを表示/非表示にします。

$("#menu_opener, #menudiv").hover(
    function(){ 
     $("#menudiv").show(); 
    }, 
    function(){ 
     $("#menudiv").hide(); 
    } 
); 

そして、それは上に移動し、HREFを重ねているようmenudivのスタイルのためのトッププロパティを設定します。

<div> 
    <a href="#" id="menu_opener">Menu</a> 
</div> 
<div id="menudiv" style="position: fixed; top: -1px; background-color: white; display: none;"> 
    <a href="#" id="A1">Page 1</a><br /> 
    <a href="#" id="A2">Page 2</a><br /> 
    <a href="#" id="A3">Page 3</a><br />       
</div> 

Answer 2

私は作品「のhref要素の上ではありません」理解していれば、あなたはのdiv＃のmenudivのオフにマウスを置いたときにメニューが表示さ滞在したいが、それでも＃のmenu_openerをマウスオーバー？

これが当てはまる場合、私はunqiue divにすべてのものをラップし、それをターゲットにします。 マウスオーバーをマウスオーバーで使用してください。

http://api.jquery.com/mouseleave/

ので、あなたのHTMLは次のようになります。

<div id="menu_container"> 
    <div> 
    <a href="#" id="menu_opener">Menu</a> 
    </div> 
    <div id="menudiv" style="position: fixed; background-color: white; display: none;"> 
    <a href="#" id="A1">Page 1</a><br /> 
    <a href="#" id="A2">Page 2</a><br /> 
    <a href="#" id="A3">Page 3</a><br />       
    </div> 
</div> 

と、スクリプトは次のようなものになるだろう：あなたがあるとしてHTMLを維持し、単純に以下を追加することができます

$("#menu_opener").click(function() { 
    if ($("#menudiv").is(":hidden")) { 
     $("#menudiv").slideDown("slow"); 
    } else { 
     $("#menudiv").hide(); 
    } 
}); 
$("#menu_container").mouseleave(function(){ 
    $('#menudiv').hide(); 
}); 

Answer 3

：

$("#menudiv").mouseleave(function(){ 
    $(this).hide(); 
}); 

jsFiddle：http://jsfiddle.net/5SSDz/