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

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)

{

    var searchcontainer = $(".header");

    if (!searchcontainer.is(e.target) // if the target of the click isn't the container...

        && searchcontainer.has(e.target).length === 0) // ... nor a descendant of the container

    {

           nav.style.visibility = "";

    }

});