点击外部隐藏分享列表后toggle功能异常求助

你的问题出在事件冒泡上！当你点击.meta-share触发列表显示后，这个点击事件会向上冒泡到document的mouseup事件处理函数里。此时，.social-share不是点击目标，而且点击的.meta-share也不在.social-share容器内，代码会立刻执行fadeOut()，刚显示的列表又被关掉了，自然toggle功能就失效了。

这里有两种简单的修复方案：

方案一：阻止触发按钮的事件冒泡 #

在.meta-share的点击事件里添加event.stopPropagation()，让点击事件停留在按钮上，不会传到document层，这样就不会触发外部关闭的逻辑：

$(".meta-share").click(function(event) { 
    event.preventDefault(); 
    event.stopPropagation(); // 新增：阻止事件冒泡到document
    $(".social-share").fadeToggle(); 
}); 

$(document).mouseup(function(e) { 
    var container = $(".social-share"); 
    if (!container.is(e.target) && container.has(e.target).length === 0) { 
        container.fadeOut(); 
    } 
});

方案二：在外部关闭逻辑中排除触发按钮 #

如果不想阻止事件冒泡，可以修改mouseup里的判断条件，当点击的是.meta-share或者它的子元素时，不执行关闭操作：

$(".meta-share").click(function(event) { 
    event.preventDefault(); 
    $(".social-share").fadeToggle(); 
}); 

$(document).mouseup(function(e) { 
    var container = $(".social-share"); 
    var triggerBtn = $(".meta-share");
    
    // 同时排除点击触发按钮的情况
    if (!container.is(e.target) && container.has(e.target).length === 0 
        && !triggerBtn.is(e.target) && triggerBtn.has(e.target).length === 0) { 
        container.fadeOut(); 
    } 
});

两种方案都能解决你的问题，方案一更简洁直接，推荐使用~

内容的提问来源于stack exchange，提问作者StephenMeehan