如何在单击时关闭此菜单？

Question

到目前为止，我成功地通过菜单图标打开和关闭菜单。但我想在任何点击时关闭它。我对如何解决这个问题感到不知所措。我尝试在 window/document/header/nav 上添加单击事件侦听器...但它似乎会在选择任何内容之前立即关闭菜单。你会如何处理这个问题？

let nav = document.querySelector(".header__nav");

function toggleNavOn() {

  if (nav.style.visibility === "") {

    nav.style.visibility = "visible";

  } else {

    nav.style.visibility = "";

  }

  navToggle.classList.toggle("header__nav_toggle--toggled")

}

let navToggle = document.querySelector(".header__nav_toggle");

navToggle.addEventListener("click", toggleNavOn);

<header class="header">

  <div class="header__container">

    <div class="header__container_logo">

      <a class="header__logo_link" href="#"><img class="header__logo_img" src="img/vtol-logo.svg" alt="Vtol Logo"></a>

      <a class="header__nav_toggle" href="javascript:void(0);">

        <span></span>

      </a>

    </div>

    <nav class="header__nav" id="nav-bar">

      <a class="header__nav_link" href="#video-container">Watch</a>

      <a class="header__nav_link" href="#features">Features</a>

      <a class="header__nav_link" href="#about">About</a>

    </nav>

  </div>

</header>

Answer 1

您可以查看“焦点”和“模糊”事件。https://developer.mozilla.org/en-US/docs/Web/API/Element/blur_event

Answer 2

要理解为什么在向窗口/文档/（无论什么父元素）添加单击事件处理程序时看到菜单立即关闭，有必要从事件捕获和冒泡的讨论开始。顺序是捕获 -> 单击捕获 -> 传播。您单击一个元素，它首先在窗口上被捕获，然后一直沿着 DOM 向下到达最具体的 DOM 元素。然后它会一路“冒泡”备份触发事件处理程序。在您的场景中发生的情况是，菜单上的单击事件不仅在该元素上触发处理程序，而且还在每个父元素上触发处理程序。一种可能的解决方案是event.stopPropagation()向菜单添加单击事件处理程序，以便单击事件不会冒泡到您附加“关闭菜单”功能的任何父 DOM 元素。

Answer 3

https://jsfiddle.net/f21vnq5s/1/您应该首先设置菜单的高度，然后在文档中检查单击是否在标题中它应该与 jquery 一起工作$(document).mouseup(function (e){&nbsp; &nbsp; var searchcontainer = $(".header");&nbsp; &nbsp; if (!searchcontainer.is(e.target) // if the target of the click isn't the container...&nbsp; &nbsp; &nbsp; &nbsp; && searchcontainer.has(e.target).length === 0) // ... nor a descendant of the container&nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;nav.style.visibility = "";&nbsp; &nbsp; }});