点击外部隐藏列表问题（第二部分）：按钮触发菜单重复显隐

这个问题的根源在于事件冒泡和目标元素的判断范围太窄：当你点击按钮内部的<span>元素（比如国旗或国家名称）时，e.target指向的是这些子元素而非按钮本身，导致document.mouseup里的判断逻辑失效——先执行了菜单隐藏，随后按钮的click事件触发又执行了fadeToggle，让菜单重新显示，就出现了「先隐藏再显示」的异常。

解决方案 #

我们需要调整两个关键点：

• 扩大mouseup事件里的目标判断范围，只要点击的是按钮或其内部元素，就不执行关闭菜单的逻辑；
• 规范jQuery的写法，让元素选择更可靠，同时确保event参数正确传递。

修改后的完整代码 #

JavaScript

$(".lang-toggle-btn").click(function(event) {
  event.preventDefault();
  // 用jQuery的next()方法替代原生nextElementSibling，兼容性更好
  $(this).next(".lang-menu").fadeToggle();
});

$(document).mouseup(function(e) {
  // 判断点击目标是否是按钮或其内部元素
  if ($(e.target).closest(".lang-toggle-btn").length > 0) {
    return;
  }
  var container = $(".lang-menu");
  // 点击菜单外部时关闭菜单
  if (!container.is(e.target) && container.has(e.target).length === 0) {
    container.fadeOut();
  }
});

CSS

.lang-menu {
  display: none;
}

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="lang-wrap">
  <div class="lang-toggle">
    <span>Currently viewing</span>
    <button class="lang-toggle-btn"><span class="flag"></span><span class="country">United Kingdom</span></button>
    <div class="lang-menu">
      <ul>
        <li><a href="/de"><span class="flag"></span><span class="country">Deutschland</span></a></li>
        <li><a class="active" href="/"><span class="flag"></span><span class="country">United Kingdom</span></a></li>
      </ul>
    </div>
  </div>
</div>

修改说明 #

1. 按钮点击事件：显式声明event参数，避免依赖全局event变量；用$(this).next(".lang-menu")替代原生nextElementSibling，确保选择器精准且兼容更多场景。
2. 全局mouseup事件：使用closest()方法检测点击目标是否属于按钮内部（包括按钮本身和所有子元素），彻底解决点击按钮子元素时误触发菜单关闭的问题。
3. 核心逻辑保留：依然保留了点击按钮切换菜单显示、点击任意外部区域关闭菜单的原有功能，同时修复了异常场景。

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