Question

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

与此同时，当用户点击我的下拉列表中的任何位置时，我也想关闭它。

我的方法是在 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();
        }
    }
}

我的问题和疑虑是：这是最好的方法吗？从表现的角度来看？由于我每次都处理文档的所有点击。

Answer 1

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

    $('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-notifications'类的元素，而不是为所有点击挂钩事件处理程序，并检查目标是否是必需的。

Answer 2

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

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

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

通知div - 下拉关闭

2 个答案: