原生JavaScript实现点击菜单外部关闭菜单功能

嘿，作为JS新手能想到这个优化点真的很棒！你的疑问完全正确——当前代码不管菜单有没有newClass，只要点击外部区域就会执行classList.remove("newClass")操作，虽然功能能正常运行，但确实有点多余。我们可以把逻辑优化成仅当菜单已经处于打开状态（也就是带有newClass类）时，点击外部才触发关闭菜单的操作，这样代码更严谨高效。

修改后的完整代码 #

JavaScript #

var b = document.getElementById("menu");
document.addEventListener("mouseup", function(event) {
  var isMenuOpen = b.classList.contains("newClass");
  var clickOnMenu = b.contains(event.target);

  if (clickOnMenu) {
    // 点击菜单内部，切换打开/关闭状态
    b.classList.toggle("newClass");
  } else if (isMenuOpen) {
    // 仅当菜单处于打开状态时，点击外部才关闭
    b.classList.remove("newClass");
  }
});

CSS #

div.box {
  margin: auto;
  padding: 1em;
  max-width: 6em;
  background: rgba(0, 0, 0, 0.6);
  text-align: center;
  color: white;
  transition: .2s ease-in-out;
  cursor: pointer;
}
div.box:hover {
  background: rgba(0, 0, 0, 0.7);
}
div.newClass {
  padding-bottom: 100px;
}

HTML #

<div id="menu" class="box">Menu</div>

关键逻辑说明 #

• 我们新增了isMenuOpen变量，通过b.classList.contains("newClass")来判断菜单当前是否处于打开状态（这个方法会返回布尔值：有该类返回true，没有则返回false）。
• 点击菜单内部时，依然用toggle来切换类，保持原有的打开/关闭功能。
• 只有当菜单已经打开且点击的是外部区域时，才执行移除newClass的操作，避免了不必要的DOM操作。

这样修改后，代码逻辑更清晰，也完全符合你想要的“仅在菜单打开时才触发外部关闭”的需求啦～

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