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