这类似于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');
    }
});

10-07 14:18