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

我的汉堡包菜单上有一个代码，我希望当我在菜单外点击时它会关闭， 此外，由于我有一些链接可以将我带到我的页面中，所以即使我单击导航菜单-链接，它也会保持打开状态

我是javascript的初学者，我尝试在身体上添加另一个eventlistener，但我无法让它工作

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

您可以添加：

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

---

当然，我知道。。这里有很多这样的问题，但是每个代码id都不一样，而且我尝试的一切都不起作用，因此我的帖子。另外，我是一个完全的初学者，所以破译别人的代码很难。这会使菜单在单击页面上的任意菜单时打开和关闭，而不会在单击汉堡图标时打开和关闭。我编辑了我的答案，我补充道：showMenu=false；就在我调用toggleMenu之前。@sebastive不工作，菜单会打开，然后它就不会关闭，即使单击汉堡图标也不会

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