如果变量的 classList 为“x”，我该如何编写侦听事件，否则在变量具有 classList“x”之前不要侦听事件答案

【问题标题】：How do I write if a variable has a classList of "x" listen for an event, otherwise don't listen for the event until the variable has the classList "x"如果变量的 classList 为“x”，我该如何编写侦听事件，否则在变量具有 classList“x”之前不要侦听事件
【发布时间】：2020-07-03 15:04:38
【问题描述】：

我正在为我的固定导航栏制作下拉汉堡菜单。我希望在单击汉堡包图标时打开和关闭菜单。如果菜单打开并且有窗口滚动事件，我还希望菜单关闭。

如果我在我的页面顶部，它似乎工作正常。但是，一旦页面向下滚动一点，菜单将不会打开，要再次打开它，我必须向上滚动到页面顶部并单击汉堡包图标。这违背了导航栏的目的。

我认为我的代码中的问题是，一旦触发了滚动事件侦听器，它就会继续侦听滚动事件，而不管 navBtn 是否包含“nav-open”。我想要它做的是只在 navBtn 具有“nav-open”类时监听滚动事件，然后如果我滚动，删除“nav-open”类并停止监听滚动事件，直到我点击汉堡菜单再次切换 navBtn 的“nav-open”类。

提前致谢

代码如下：

const select = selector => document.querySelector(selector);

const navBtn = select('.mobile-navbar__btn');
const navOpen = select('.mobile-navbar__open');

// Toggling the hamburger menu
function toggle() {
    navBtn.classList.toggle('nav-open');
    navOpen.classList.toggle('nav-open');
} 

// Open and close the hamburger menu
navBtn.addEventListener('click', () => {
    toggle();

    if(navBtn.classList.contains('nav-open')) {
        window.addEventListener('scroll', () => {
            console.log('scroll');
            navBtn.classList.remove('nav-open');
            navOpen.classList.remove('nav-open');
        });
    } else {
        return;
    }
});

【问题讨论】：

你的代码会添加多个滚动事件监听器，所以这不是一件好事。
@epascarello 你能告诉我我将如何改变它吗？

标签： javascript

【解决方案1】：

您需要删除您添加的事件。

const scrollFunction = () => {
  navBtn.classList.remove('nav-open');
  navOpen.classList.remove('nav-open');
  window.removeEventListener('scroll', scrollFunction);
}

// Open and close the hamburger menu
navBtn.addEventListener('click', () => {
  toggle();

  if (navBtn.classList.contains('nav-open')) {
    window.addEventListener('scroll', scrollFunction);
  } else {
    window.removeEventListener('scroll', scrollFunction);
  }
});

【讨论】：