通过使用纯 javascript 在外部单击关闭

Question

我想在菜单按钮区域外单击时关闭菜单（打开时删除添加的类）。

我得到了一切工作，但想知道我放在一起的代码是否正确，因为我认为只有在将 .newClass 添加到 div 时才应该触发外部点击。如果是这样，我该如何添加？我对javascript很陌生。

var b = document.getElementById("menu");
document.addEventListener("mouseup", function(event) {
  var clickOnMenu = b.contains(event.target);
  if (clickOnMenu) {
    b.classList.toggle("newClass");
  } else {
    b.classList.remove("newClass");
  }
});

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

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

Answer 1

希望对你有帮助

var b = document.getElementById("menu");
document.addEventListener("mouseup", function(event) {
  var x = event.target.id;
  if(x == "menu" ) {
    b.classList.add("newClass");
  } else {
    b.classList.remove("newClass");
  }
});

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

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