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

（我没有足够的代表发表评论）

<强>更新

我不太明白你需要什么，所以我会给出一个幸运的猜测，我也找不到更好的方法，窗口点击事件仍会触发，但内部代码将无法运行，如果菜单的显示设置为无。希望它有所帮助。

$(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

＆＃13;

$(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();
});

＆＃13;

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

＆＃13;

<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>

＆＃13;

点击时绑定事件

2 个答案: