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

Question

i have this code for my hamburger menu, i want it to close when i click outside of it, also, since i have links that take me within my page, it stayes open even when i click the nav-menu- link

i`ma beginner with javascript, i tryed adding another eventlistener on the body, but i cant make it work

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

You can add:

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

when you add an event listener to the window you will "listen" for every click the user clicks over the window, and then when it emits the code will invoke your "toggleMenu" function and it will run the else and close the menu.

your full code snipped:

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;
    }
}