クリック時のバインドイベント

Question

私は、コンテキストメニューボタンと、コンテキストメニューボタンがクリックされるたびに開くコンテキストメニューを持っています。この非常にクリックすると、ドキュメント上のイベントをバインドして、次のクリックがコンテキストメニューの境界外にある場合にコンテキストメニューが崩壊するようにしたいのですが、コードでは、コンテキストメニューが開いたときに。

$('.btn-user-context-menu').on('click tap', function(){ 

    //open the menu 
    $('.context-menu[data-context="user"]').toggleClass('open'); 

    //bind event so that menu collapses if next click is outside of it 
    $(document).on('click tap', function(e){ 
     console.log('x'); 
    }) 
}) 

はあなたの助けをありがとう、私は本当に、同様の説明をいただければ幸いです:)

Answer 1

は、ウィンドウを閉じ、文書本体にクリックイベントを接続します。 別のクリックイベントをウィンドウに添付して、文書本体の への伝播を停止します。

$(window).click(function() { 
//Hide the menu if visible 
}); 

$('.btn-user-context-menu').click(function(event){ 
    event.stopPropagation(); 
}); 

出典：answer

UPDATE

私は非常にあなたが必要なものを理解していなかった（私はコメントを残すのに十分な担当者を持っていません）、だから私は幸運な推測を与えるだろう、私もより良いアプローチを見つけることができませんでした、ウィンドウのクリックイベントはまだトリガされますが、内側のコードは、メニューの表示は、 tをnoneにする。 お手伝いをしてください。

$(window).click(function() { 
    //Hide the menu if visible 
    alert('trigger event but do not collapse if it\'s already collapsed'); 
    if($('.menu').css('display') !== 'none'){ 
    $('.menu').slideUp("slow", function() { 
     alert('collapse'); 
    }); 
    } 
}); 

$('.btn-user-context-menu').click(function(event){ 
     $('.menu').slideDown("slow", function() { 
     //do something if you want 
     alert('expand'); 
    }); 
    event.stopPropagation(); 
}); 

jsfiddle

Answer 2

$(document).click(function(e) { 
 

 
    // check that your clicked 
 
    // element has no id=info 
 
    // and is not child of info 
 
    if (e.target.id != 'info' && e.target.id != 'mb' && !$('#info').find(e.target).length) { 
 
     $("#info").hide(); 
 
    } 
 
}); 
 

 
$('#mb').on('click', function(){ 
 
    $('#info').show(); 
 
});

#info{ 
 
    background: #ccc; 
 
    padding: 10px; 
 
    display: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> 
 
<button id="mb"> 
 
Menu 
 
</button> 
 
<div id="info"> 
 
    <h1>Header</h1> 
 
    Menu item 1<br> 
 
    Menu item 2 
 
</div>