时间戳

首页 > 解决方案 > 'if' 语句和 eventListener 问题

javascript - '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);
  });
}

标签： javascriptevent-handlingconditional-statementsaddeventlistener

解决方案

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

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

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

推荐阅读