如何將箭頭 function 變成 if/else 語句？

Question

我的切換菜單遇到了一個小問題。 漢堡包 animation 工作正常，單擊鏈接后，它會將您帶到我頁面的該部分，並刪除我的 CSS 助手 class “無法滾動”我的切換菜單溢出。 但是，如果您想查看菜單，請在不單擊菜單項的情況下將其關閉 - “鎖屏”class 仍然適用。 我有點像 JavaScript newb，如果關閉菜單后沒有單擊鏈接，我是否需要將事件偵聽器添加到添加新變量/函數的 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");
  });
});

Answer 1

您可以在主體上添加一個事件偵聽器，以便菜單外的任何點擊都將刪除“鎖屏”，或者更復雜的方法是在偵聽器 function 中使用 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");
})

注意冒泡，在此處閱讀有關傳播、捕獲和冒泡的更多信息