jquery - jQuery切换UI元素的可见性，但如果未单击该div的任何部分，则使其不可见

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

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

这就是我现在所拥有的，如果您再次单击该按钮，则只能关闭弹出的窗口。

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

这是我尝试过的方法，但均未触发任何事件：

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

通知柜台是H3

图片面板是img

最佳答案

尝试这个。

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