如何 ？单击菜单外部时关闭菜单

Question

我的汉堡菜单有这个代码，我希望它在我点击它外面时关闭， 此外，由于我的页面中有链接，因此即使我单击导航菜单链接，它也会保持打开状态

我是 javascript 初学者，我尝试在 body 上添加另一个事件监听器，但我无法让它工作

const menuBtn = document.querySelector('.menu-btn');
const hamburger = document.querySelector('.menu-btn-burger');
const nav = document.querySelector('.nav');
const navMenu = document.querySelector('.nav-menu');
const navItems = document.querySelectorAll('.nav-menu-item');


let showMenu = false;

menuBtn.addEventListener('click', toggleMenu);


function toggleMenu() {
    if(!showMenu) {
        hamburger.classList.add('open');
        nav.classList.add('open');
        navMenu.classList.add('open');
        navItems.forEach(item => item.classList.add('open'));

        showMenu = true;
    }   
    else {
        hamburger.classList.remove('open');
        nav.classList.remove('open');
        navMenu.classList.remove('open');
        navItems.forEach(item => item.classList.remove('open'));
        

        showMenu = false;
    }
}

 <div class="menu-btn">
        <span class="menu-btn-burger"></span>
      </div>
      <!-- !end-burger -->

      <nav class="nav">
        <ul class="nav-menu">
          <li class="nav-menu-item">
            <a href="" class="nav-menu-link">Home</a>
          </li>
          <li class="nav-menu-item">
            <a href="#services" class="nav-menu-link">Services</a>
          </li>
          <li class="nav-menu-item">
            <a href="" class="nav-menu-link">Our Works</a>
          </li>
          <li class="nav-menu-item">
            <a href="" class="nav-menu-link">Clients</a>
          </li>
          <li class="nav-menu-item">
            <a href="" class="nav-menu-link">Contact</a>
          </li>
        </ul>
      </nav>
      <!-- !end nav -->

Answer 1

您可以添加：

window.addEventListener('click', () => {
  if(showMenu) {
      toggleMenu();
  }
});

当您向窗口添加事件侦听器时，您将“监听”用户在窗口上单击的每次单击，然后当它发出时，代码将调用您的“toggleMenu”函数，它将运行 else 并关闭菜单。

你的完整代码被剪断了：

const menuBtn = document.querySelector('.menu-btn');
const hamburger = document.querySelector('.menu-btn-burger');
const nav = document.querySelector('.nav');
const navMenu = document.querySelector('.nav-menu');
const navItems = document.querySelectorAll('.nav-menu-item');



window.addEventListener('click', () => {
  if(showMenu) {
      toggleMenu();
  }
});


let showMenu = false;

menuBtn.addEventListener('click', toggleMenu);


function toggleMenu() {
    if(!showMenu) {
        hamburger.classList.add('open');
        nav.classList.add('open');
        navMenu.classList.add('open');
        navItems.forEach(item => item.classList.add('open'));

        showMenu = true;
    }   
    else {
        hamburger.classList.remove('open');
        nav.classList.remove('open');
        navMenu.classList.remove('open');
        navItems.forEach(item => item.classList.remove('open'));
      
        showMenu = false;
    }
}