Question

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

我把它全部工作但是想知道我放在一起的代码是否正确，因为我认为只有当.newClass被添加到div时才会触发外部的单击。如果是这样，我该如何添加？我对javascript很新。

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

希望这有助于你

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

用普通的javascript点击外面关闭

1 个答案: