javascript - event.stopPropagation(); 隐藏下拉菜单，但不是在单击它时

Question

所以我想让按钮.notification出现.notificaiton-dropdown，然后在这个元素之外单击会关闭它。这行得通。

但是，当我单击该元素时，它会导致它关闭。我想要当前的功能，但不是在单击元素本身时，所以我可以与之交互。

$(document).ready( function(){
    $('.notification').click( function(event){
        event.stopPropagation();
        $('.notification-dropdown').toggle();
    });
    $(document).click( function(){
        $('.notification-dropdown').hide();
    });
});

我希望这是足够的信息。一如既往地感谢。

Answer 1

notification-dropdown您还需要停止事件传播

$(document).ready( function(){
    $('.notification-dropdown').click( function(event){
        event.stopPropagation();
    });
    $('.notification').click( function(event){
        event.stopPropagation();
        $('.notification-dropdown').toggle();
    });
    $(document).click( function(){
        $('.notification-dropdown').hide();
    });
});

Answer 2

我会说：

$(document).click( function(e){
    if($(e.target).closest('.notification-dropdown').length) return;
    $('.notification-dropdown').hide();
});