在其外部单击时删除侧边菜单 pure javascript

Question

所以我刚刚从答案中复制了代码，但它似乎不起作用。我不知道为什么。

当前行为：打开菜单并在其外部单击后没有任何反应（class 'openMenu' 保持不变）

预期行为：打开菜单并在其外部单击后菜单关闭（class openMenu 删除）

var navToggle = document.getElementById("menu-trigger");
var navMenu = document.getElementById("header-menu");
var isMouseDown = false;

navToggle.addEventListener('click', function() {
  this.focus();
  navMenu.classList.toggle('openMenu');
  navMenu.focus();
});

navMenu.addEventListener('mousedown', function() {
  isMouseDown = true;  
});

navMenu.addEventListener('mouseup', function() {
  isMouseDown = false;  
});

navMenu.addEventListener('mouseleave', function() {
  isMouseDown = false;  
});

navMenu.addEventListener('blur', function() {
  if (!isMouseDown) {
    navMenu.classList.remove('openMenu');
  }
}, true);

header i.fa-bars {
  position: absolute;
  right: 0;
  margin: 5px;
  font-size: 1rem;
  cursor: pointer;
}

header nav ul {
  position: absolute;
  top: 0;
  left: 0;
  -webkit-transform: translateX(-150%);
          transform: translateX(-150%);
  -webkit-transition: .5s all;
  transition: .5s all;
  padding: 10px;
  width: 50vw;
  font-size: 2rem;
  background-color: #1f2a3e;
  height: 100%;
  z-index: 99;
  margin: 0 auto;
  display: -ms-grid;
  display: grid;
  -ms-grid-rows: (minmax(50px, 1fr))[auto-fill];
      grid-template-rows: repeat(auto-fill, minmax(50px, 1fr));
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

header nav ul.openMenu {
  -webkit-transform: translateX(0);
          transform: translateX(0);
  -webkit-transition: .5s all;
  transition: .5s all;
}

  <header>
    <i class="fas fa-bars" id="menu-trigger">fontawesome menu icon</i>
    <nav>
      <ul id="header-menu">
        <li><a href="">Главная</a></li>
        <li><a href="">Кейсы</a></li>
        <li><a href="">Услуги</a></li>
        <li><a href="">Отзывы</a></li>
        <li><a href="">Контакты</a></li>
      </ul>
    </nav>
  </header>

花了三个小时尝试实现这个，尝试了所有可用的解决方案，但都失败了。我究竟做错了什么？我该如何完成？

谢谢 @epascarello 先生提供的工作解决方案。

Answer 1

创建一个新的 span 元素。使用 window.innerWidth 和 window.innerHeight 使其覆盖整个屏幕。现在，在 javascript 中添加一个 id 和对 span 的引用。不要在 navToggle 上使用点击事件侦听器，而是将其放在 span 上。这将实现行为。

Answer 2

向主体添加点击处理程序，检查事件的来源。如果不是导航，隐藏它。

var navToggle = document.getElementById("menu-trigger");
var navMenu = document.getElementById("header-menu");

navToggle.addEventListener('click', function() {
  this.focus();
  navMenu.classList.toggle('openMenu');
});

document.querySelector("body").addEventListener("click", function(evt) {
  if (!navMenu.classList.contains('openMenu')) return;
  var isNav = navMenu.contains(evt.target) || navToggle.contains(evt.target);
  if (!isNav) {
    navMenu.classList.remove('openMenu');
  }

})

header i.fa-bars {
  position: absolute;
  right: 0;
  margin: 5px;
  font-size: 1rem;
  cursor: pointer;
}

header nav ul {
  position: absolute;
  top: 0;
  left: 0;
  -webkit-transform: translateX(-150%);
  transform: translateX(-150%);
  -webkit-transition: .5s all;
  transition: .5s all;
  padding: 10px;
  width: 50vw;
  font-size: 2rem;
  background-color: #1f2a3e;
  height: 100%;
  z-index: 99;
  margin: 0 auto;
  display: -ms-grid;
  display: grid;
  -ms-grid-rows: (minmax(50px, 1fr))[auto-fill];
  grid-template-rows: repeat(auto-fill, minmax(50px, 1fr));
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}

header nav ul.openMenu {
  -webkit-transform: translateX(0);
  transform: translateX(0);
  -webkit-transition: .5s all;
  transition: .5s all;
}

<header>
  <i class="fas fa-bars" id="menu-trigger">fontawesome menu icon</i>
  <nav>
    <ul id="header-menu">
      <li><a href="">Главная</a></li>
      <li><a href="">Кейсы</a></li>
      <li><a href="">Услуги</a></li>
      <li><a href="">Отзывы</a></li>
      <li><a href="">Контакты</a></li>
    </ul>
  </nav>
</header>
<h1>Hello World</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ultricies tellus fringilla enim eleifend aliquam. Nulla non imperdiet metus, quis tincidunt nunc. Nullam arcu elit, tincidunt et mauris a, dapibus interdum sapien. Curabitur sollicitudin leo nibh, sed maximus dui hendrerit nec. Vivamus sed urna vel mauris sodales eleifend in vel urna. Nunc pulvinar non turpis in fringilla. Sed ac iaculis turpis. Aliquam condimentum mollis nunc, eu feugiat sem interdum a. Pellentesque efficitur velit fermentum tristique molestie. Donec sed volutpat magna, id consequat nulla. In nec enim nulla. Cras in lacus tincidunt, feugiat lorem in, eleifend tellus. Mauris eget lectus urna. Duis quis nulla eget massa fringilla elementum nec id eros.</p>

Answer 3

我之前的回答没有那么具体。这是一个新的。您应该添加的 HTML 是这样的：

<span id="page"></span>

这里是 javascript:

var page = document.getElementById('page');
page.style.width = window.innerWidth;
page.style.height = window.innerHeight;
page.addEventListener('click', function() {
    this.focus();
    navMenu.classList.hide('openMenu');
    navMenu.focus();
});

在其外部单击时删除侧边菜单 pure javascript

Remove side menu on click outside of it pure javascript

javascript

events

menu