jQuery绑定回调触发自己

Question

我有一个菜单，在单击某个元素时显示，我想在它的回调中做的是将单击事件绑定到主体，以便您可以单击任何地方使菜单隐藏(然后取消绑定新绑定)。

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

问题是它不仅绑定click on body，而且还触发那个事件。我尝试在settimeout中包装该绑定以添加延迟，但刚刚绑定的body click事件最终会触发(并且菜单从未显示，令人失望)。有更好的办法处理这个案子吗?

Answer 1

我认为可以这样做:

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

Answer 2

我想到了我的问题的答案，基于这个响应:jQuery -隐藏div菜单后点击外部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/