Jquery 切换 UI 元素的可见性，但如果没有单击该 div 的任何部分，则使其不可见

Question

这类似于 facebook 和 google 通知按钮，您单击它们并弹出一个窗口，如果您再次单击该按钮或单击不属于通知 div 的任何部分，则会关闭窗口。

我的问题是我找不到用于取消单击对象或单击对象的事件。

这就是我现在所拥有的，只有重新单击按钮才能关闭弹出的内容。

notifycounter.click(function() {
    return imagepanel.toggle();
});

这是我尝试过的，但两个事件都没有触发:

notifycounter.focusin(function() {
  return imagepanel.toggle();
});
notifycounter.focusout(function() {
  return imagepanel.hide();
});

通知计数器是一个 h3

图像面板是一个img

Answer 1

试试这个。

notifycounter.click(function(e) {
    imagepanel.toggle();
    e.stopPropagation();//this will stop the event bubbling
});

$(document).click(function(){
   if(imagepanel.is(':visible')){
      imagepanel.hide(); 
   }
});

你可以像这样优化它。

notifycounter.click(function(e) {
    imagepanel.toggle();
    e.stopPropagation();//this will stop the event bubbling

    if(imagepanel.is(':visible')){
        $(document).one('click.imagepanel', function(){
             imagepanel.hide(); 
        });
    }
    else{
        $(document).unbind('click.imagepanel');
    }
});