Question

我有一个单击某个元素的菜单，我想在它的回调上做的是将一个click事件绑定到正文，这样你就可以点击任意一个来隐藏菜单（然后取消绑定新绑定）。

$('#menu_button').click(function(){
    $('#user_menu').toggle();
}, function(){
    $('body').bind('click', function(){
          if($('#user_menu').css('display') == 'block')
                $('#user_menu').hide();
    }, function(){
          $('body').unbind('click');
    }); 
});

问题在于它并不仅仅绑定了身体上的点击，但它也会触发该事件。我尝试在setTimout中包装该绑定以添加延迟，但刚绑定的正文单击事件最终会触发（并且菜单永远不显示，无聊）。有没有更好的方法处理这种情况？

Answer 1

我认为可以这样做：

$('#menu_button').click(function () {
    $('#user_menu').toggle(function(){
        $("body").bind("click",function(){
            $('#user_menu').hide();
            $("body").unbind("click");
        });
    });
});

Answer 2

根据此回复得出问题的答案：jQuery - Hide a div menu after clicking outside div

我的解决方案有点不同，它是这样的：

$(document).click(function(e){
    var clicked = e.target.id;
    if(clicked != 'menu_button') {
        $('#user_menu').hide();
    }
});

简单就像那个哈哈。我以前不知道.target，肯定会记住那个。

Answer 3

嗯，我不确定我是否理解你的问题。我的问题是：为什么使用.bind（）方法？对于像你这样的人，我通常做这样的事情：

$(document).ready(function(){
  $('#menu_button').on('click', function(e) {
    e.preventDefault();
    e.stopPropagation();

    $('#user_menu').show();

    $(document).on('click', function(e) {
      if( $('#user_menu').has(e.target).length === 0 ) {
        $('#user_menu').hide();
      }
    });
  });
});

这里的工作示例：http://jsfiddle.net/m2ry2ajn/1/

回调上的jQuery绑定会激活自身

3 个答案: