时间戳

首页 > 解决方案 > 如何将箭头函数转换为 if/else 语句？

javascript - 如何将箭头函数转换为 if/else 语句？

问题描述

我的切换菜单遇到了一个小问题。汉堡动画效果很好，单击链接后，它会将您带到我页面的该部分，并删除我的 CSS 帮助程序类“锁屏” - 这隐藏了我的溢出，因此您无法在切换菜单上滚动。但是，如果您想查看菜单，请在不单击菜单项的情况下关闭它 - “锁屏”类仍然适用。我有点 JavaScript 新手，如果关闭菜单后没有单击链接，我是否需要将事件侦听器添加到 if/else 语句中添加新变量/函数以启用滚动？


const navToggle = document.querySelector(".nav-toggle");
const navLinks = document.querySelectorAll(".nav__link");

navToggle.addEventListener("click", () => {
  document.body.classList.toggle("nav-open");
  document.body.classList.add("lockscreen");
});

navLinks.forEach((link) => {
  link.addEventListener("click", () => {
    document.body.classList.remove("nav-open");
    document.body.classList.remove("lockscreen");
  });
});

标签： javascripthtmlcssif-statementarrow-functions

解决方案

您可以在主体上添加一个事件侦听器，以便菜单外的任何点击都将删除“锁屏”，或者更复杂的方法是在侦听器函数中使用 if/else 来检查当前 event.target = == '一些元素'


const navToggle = document.querySelector(".nav-toggle");
const navLinks = document.querySelectorAll(".nav__link");


navToggle.addEventListener("click", () => {
  document.body.classList.toggle("nav-open");
  document.body.classList.add("lockscreen");
});

navLinks.forEach((link) => {
  link.addEventListener("click", () => {
    document.body.classList.remove("nav-open");
    document.body.classList.remove("lockscreen");
  });
});

document.body.addEventListener("click", () => {
    document.body.classList.remove("lockscreen");
})

小心冒泡！在此处阅读有关传播、捕获和冒泡的更多信息

推荐阅读