1

はじめに：
みなさん、こんにちは。メニューを作成しようとしていますが、mouseenter/mouseleaveイベントに問題があります。

私がこれまでに持っているもの： 

$("#icon").click(function() {
    $("#invis").css("display", "block");
    $("#icon").bind("mouseleave", function(){
        $("#invis").css('display', "none");
    }).bind("mouseenter", function(){
        $("#invis").css('display', "block"); 
    });
    $("#invis").bind("mouseleave", function(){
        $("#invis").css('display', "none");
    }).bind("mouseenter", function(){
        $("#invis").css('display', "block");
    });
});​

これまでのところ、私はこれを試しました。私のポイントは「アイコン」をクリックすることです。このクリックでメニュー/別の非表示の要素が表示されます。誰かが「アイコン」または実際のメニューの上にマウスを置いている限り、開いたままにしておきたいと思います。しかし、私が提供したコードでは、マウスを離れて「アイコン」にもう一度入力すると、onmouseenterイベントが継続され、メニューが再び表示されます。onmouseenterイベントのバインドを解除できることはわかっていますが、メニューからアイコンに移動すると、メニューが閉じてしまい、それは望ましくありません。

私が考えることができる最も簡単な例：http：//jsfiddle.net/tzzqM/5/

質問
クリックイベントで「メニュー」を開き、誰かがメニューまたは「アイコン」（両方）の上にマウスを置いている限り、開いたままにする方法。マウスが両方の領域を離れると、メニューが閉じます。それを開くには、「アイコン」をもう一度クリックする必要があります。これを行う別の方法はありますか？

4

2 に答える 2

3

マウスがオブジェクトを離れるときに、マウスがまだメニュー上にあるかメニューボタン上にあるかを確認します。そうでない場合は、メニューを非表示にします。基本的に、イベントを両方の要素にバインドしてmouseleaveから、選択範囲の長さを確認します。1の場合、メニューまたはボタンのいずれかにいます。これにより、メニューボタンの終了がメニュー自体になり、コードの「非表示」部分がトリガーされません。選択の長さが0の場合、終了しません。それらの要素のいずれかを非表示にします。

$("#icon").click(function() {
    $("#invis").css("display", "block");
        $("#invis,#icon").bind("mouseleave", function(){
            if($("#invis:hover,#icon:hover").length === 0){
                $("#invis").css('display', "none");
            }
        })
});​

ここにフィドルがあります。

または、最初から作成する必要がある場合の書き方（jQueryの部分のみ）。DOMプールにジャンプする回数が少なくなり、機能は同じですが、もう少し効率的になるはずです。最初の1つ。これがフィドルです

var icon = $("#icon"),
    menu = $("#invis");

icon.click(function() {
    menu.show();
        $.merge(icon,menu).bind("mouseleave", function(){
            if($("#icon:hover,#invis:hover").length < 1) menu.hide();
        });
});​

または、jhummelからの提案を使用して、ホバーのある新しいビューのIDにアクセスし、それが監視する2つのうちの1つであるかどうかを確認できます。これは、プールにもう一度ジャンプするのを防ぐので素晴らしいです。これにより、パフォーマンスがわずかに向上します。これがフィドルです。

var icon = $("#icon"),
    menu = $("#invis");

icon.click(function() {
    menu.show();
        $.merge(icon,menu).bind("mouseleave", function(e){
            if($.inArray(e.relatedTarget.id, ["icon","invis"]) === -1){
                   menu.hide();
            }
        });
});​

。

関連ドキュメント：

于 2012-12-08T19:33:46.703 に答える
1

mouseoverまたはイベントを使用する場合mouseleave、jQueryのイベントオブジェクトにはrelatedTargetプロパティがあります。そのプロパティをチェックして、マウスが他の要素に入っているかどうかを確認できます。

$("#icon").on('click',function() {
  $("#invis").show();
}).on('mouseleave', function(e) {
  if(e.relatedTarget.id != 'invis') $('#invis').hide();    
});

$('#invis').on('mouseleave', function(e) {
  if(e.relatedTarget.id != 'icon') $(this).hide();
});

jquery relatedTarget docs </ p>

于 2012-12-08T19:39:57.157 に答える