“if”语句和 eventListener 问题

如何解决“if”语句和 eventListener 问题

我正在构建一个网站，现在我在尝试获取 if 语句以读取状态变量更改时遇到问题。

当我单击正文中除导航栏以外的任何位置时，我试图关闭导航栏菜单。但是，我的包含主体事件侦听器的 if 语句将不会执行，因为（我认为）用于条件的状态变量的更改（菜单打开时为真，菜单关闭时为假）不是正在阅读。

当我打开导航菜单时，状态变量的更改更改为 true，正如预期的那样。当我使用导航栏上的按钮关闭菜单时，状态变量的更改更改为 false，正如预期的那样。

这是我的代码：

"use strict";

const btnNav = document.querySelector(".nav-btn--container");
const linkContainer = document.querySelector(".link-container");
const header = document.querySelector(".header");
const sidebar = document.querySelector(".sidebar");
const bodyChildren = header.parentElement.children;
const navBtn = document.querySelector(".nav-btn");
const menu = document.querySelector(".sidebar__menu");
const body = document.querySelector(".container");

/**** change of state variables ****/
let menuIsOpen = false;

/**** functions ****/
const closeMenu = function () {
  addRemoveBlur("remove");
  navBtn.classList.remove("nav-btn--opened");
  sidebar.classList.remove("blur");
  navBtn.classList.add("nav-btn--closed");
  menu.style.visibility = "hidden";
  menu.style.transform = "translateX(-150%)";
  menuIsOpen = false;
};

const openMenu = function () {
  addRemoveBlur("add");
  navBtn.classList.remove("nav-btn--closed");
  navBtn.classList.add("nav-btn--opened");
  menu.style.visibility = "visible";
  menu.style.transform = "translateX(0%)";
  menuIsOpen = true;
};

const closeMenuByBody = function (e) {
  const click = e.target;
  closeMenu();
};

const openCloseMenu = function () {
  if (!menuIsOpen) {
    openMenu();
    return;
  }

  if (menuIsOpen) {
    closeMenu();
    return;
  }
};

/**** this is the problem ****/
if (menuIsOpen) {
  body.addEventListener("click",function (e) {
    closeMenuByBody(e);
  });
}

解决方法

问题是事件侦听器从未初始化，因为您的 menuIsOpen 变量始终声明为 false。

您应该将 if 语句切换为包含在点击事件处理程序中，如下所示：

body.addEventListener("click",function (e) {
  if (menuIsOpen) {
    closeMenuByBody(e);
  }
});

您还应该考虑对 openCloseMenu 方法（此处重命名为 toggleMenu）进行以下更改：

const toggleMenu = function () {
  if (menuIsOpen) {
    closeMenu();
  } else {
    openMenu();
  }
};

当您评估一个布尔值时，没有必要在两个不同的 if 表达式中测试它：您检查它是否为真，如果为真则执行某些操作，否则您在知道它为假的情况下执行某些操作。

您也可以删除您的 closeMenuByBody 方法，并从您的事件侦听器中调用 closeMenu 方法，因为您没有在其中执行任何操作：

body.addEventListener("click",function (e) {
  if (menuIsOpen) {
    e.preventDefault();
    closeMenu();
  }
});