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

DEMO

事件监听器仅工作一次

1 个答案: