0

我的汉堡菜单有这个代码，我希望它在我点击它外部时关闭，而且，因为我有链接可以带我进入我的页面，即使我点击导航菜单链接它也会保持打开状态

我是 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 -->
4

1 回答 1

0

你可以加 ：

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;
    }
}
于 2021-05-01T19:16:45.290 回答