事件监听器仅工作一次

Question

我在事件监听器中创建此函数，以在单击时向我的HTML添加/删除一些类。 问题是事件侦听器只能工作一次，并且需要刷新页面才能再次工作。 我也尝试使用onClick，但它不起作用。

 const menuBtn = document.querySelector('.menu-btn'); const menu = document.querySelector('.menu'); const menuNav = document.querySelector('.menu-nav'); const menuBranding = document.querySelector('.menu-branding'); const navItems = document.querySelectorAll('.nav-item'); let showMenu = false; menuBtn.addEventListener('click', toggleMenu); function toggleMenu() { 'use strict'; if (!showMenu) { menuBtn.classList.add('close'); menu.classList.add('show'); menuNav.classList.add('show'); menuBranding.classList.add('show'); navItems.forEach(item => item.classList.add('show')); // Set Menu State showMenu = true; } else { menuBtn.classList.remove('close'); menu.classList.remove('show'); menuNav.classList.remove('show'); menuBranding.classList.remove('show'); navItems.forEach(item => item.classList.remove('show')); } } 

 <header> <div class="menu-btn"> <div class="btn-line"></div> <div class="btn-line"></div> <div class="btn-line"></div> </div> <nav class="menu"> <div class="menu-branding"> <div class="portrait"></div> </div> <ul class="menu-nav"> <li class="nav-item"> <a href="/" class="nav-link">Home</a> </li> <li class="nav-item"> <a href="/about.html" class="nav-link">About Me</a> </li> <li class="nav-item"> <a href="/work.html" class="nav-link">My Work</a> </li> <li class="nav-item"> <a href="/contact.html" class="nav-link">Contact me</a> </li> </ul> </nav> </header> 

Answer 1

关闭菜单时，需要将showMenu切换回false 。

function toggleMenu() {
  'use strict';
  if (!showMenu) {
    menuBtn.classList.add('close');
    menu.classList.add('show');
    menuNav.classList.add('show');
    menuBranding.classList.add('show');
    navItems.forEach(item => item.classList.add('show'));

    // Set Menu State

    showMenu = true;

  } else {
    menuBtn.classList.remove('close');
    menu.classList.remove('show');
    menuNav.classList.remove('show');
    menuBranding.classList.remove('show');
    navItems.forEach(item => item.classList.remove('show'));

    showMenu = false;
  }
}

演示