通知div - 下拉菜单关闭

我有一个类似于stackoverflow的通知下拉菜单。因此，当用户请求通知窗口时，我使用.show和.hide打开并关闭我的下拉格。通知div - 下拉菜单关闭

同时我也想关闭它，当用户点击我的下拉div之外的任何地方。

我的方法是做我的layout.cshtml如下：

$(document).on("click", onDocumentClick); 

function onDocumentClick(event) { 
    var target = $(event.target); 
    if (!target.hasClass('nbr-notifications')) { 
     if ($('#notifications-dropdown').css('display') === 'block') { 
      $('#notifications-dropdown').hide(); 
     } 
    } 
}

我的问题和关注的是：这是做到这一点的最好方法是什么？从性能角度来看？由于我每次处理文档的所有点击。

来源

2014-02-27 user2779312

解决方案可以在这里找到： http://stackoverflow.com/questions/1403615/use-jquery-to-hide-a-div-when-the-user -clicks-outside-of-it – user2779312

如果你不确定元素的位置，你不能使用它吗？

$('body').on("click",".nbr-notifications", onClick) 
    .on('blur','.nbr-notifications',closeNotifications); 

function onClick(event) {   

     if ($('#notifications-dropdown').css('display') === 'block') { 
      $('#notifications-dropdown').hide(); 

    } 
} 

function closeNotifications() 
{ 
//close it 
}

这里只响应点击与类“NBR的通知”元素，而不是挂钩事件处理程序的所有点击和检查目标是需要一个。

来源

2014-02-27 20:15:47

我试过了，但事件并没有为我的div启动。我尝试了一个输入文本框，它的工作原理。所以不知何故代码不适用于一个div。谢谢 – user2779312

如果您希望通知在失去焦点后消失，为什么不直接将聚焦事件绑定到该元素而不是单击到整个文档。

http://api.jquery.com/focusout/

$('.nbr-notifications').on('focusout',function(){ 
    //close functionality here. something like: $(this).hide(); 
});

来源

2014-02-27 20:17:45 FGhilardi

我将它应用到了＃notifications-dropdown，我无法使其工作。它不会着火。当我在我的''＃notifications-dropdown''之外点击时，什么也没有发生。谢谢 – user2779312

通知div - 下拉菜单关闭

回答

相关问题