Question

我创建了一个侧面菜单，单击菜单按钮时该菜单会显示和隐藏。现在，我希望在菜单外单击时关闭菜单，但是我不知道该怎么做。

我曾尝试在主体上添加clicklistener，但这会完全禁用菜单。我还想获得在正文中任何位置单击的元素的ID，并在clickedElement != sideBar && sideBar.style = "200px"的情况下关闭菜单，但是我无法使其正常工作。有人可以帮我吗？我想找到一个没有JQuery的解决方案。

menuBtn.addEventListener("click", function () {
  if (sideBar.style.width == "200px") {
    sideBar.style.width = "0px";
    setTimeout(function () {
      menuItems.style.display = "none";
    }, 1000);
  } else {
    sideBar.style.width = "200px";
    menuItems.style.display = "block";
  }
});

Answer 1

您可以将事件侦听器添加到父容器中，并检查点击目标是否位于元素内，例如：

document.addEventListener("click", (e) => {
  if (box.contains(e.target)) {
    result.innerHTML = "inside";
  } else {
    result.innerHTML = "outside";
  }
});

#box {
  width: 100px;
  height: 100px;
  background-color: dodgerblue;
}

<div id="box"></div>
<div id="result"></div>

外部点击关闭菜单-Vanilla JS

1 个答案: