如果单击div，则隐藏元素

Question

我目前有一个菜单，单击移动按钮时会出现。当用户单击div时，我希望div隐藏。现在，我有一个“ X”，用户必须单击以隐藏div。我该如何完成我想做的事情？ （我相信我已经包括了所有必要的代码-但是如果我错过了什么，请告诉我。）

提前谢谢！

HTML

<div class="nav-mobile">
    <a href="#link1">Menu Item 1</a>
    <a href="#link2">Menu Item 2</a>
</div>

JS

if (nav-mobile) {
  nav-mobile.addEventListener('click', () => {
    nav.classList.toggle('active');
  });
}

SCSS

（默认为隐藏）

.nav-mobile {
  visibility: hidden;
}

（当移动导航处于活动状态时，它将变为可见）

&.active {
  .nav-mobile {
    visibility: visible;
    opacity: 1;
    h5:not(nav-mobile-title) {
      margin: 0;
    }
  }
}