Question

我正在学习JavaScript，并且花了很长时间尝试找到解决上述问题的方法。我希望单击链接时关闭全屏菜单。我无法为自己的生活弄清楚该怎么做。这是我的JavaScript：

// Select DOM Items
const menuBtn = document.querySelector(".menu-btn");
const menu = document.querySelector(".menu");
const menuNav = document.querySelector(".menu-nav");
const menuBranding = document.querySelector(".menu-branding");
const navItems = document.querySelectorAll(".nav-item");

// Set Initial State Of Menu
let showMenu = false;

menuBtn.addEventListener("click", toggleMenu);

function toggleMenu() {
  if (!showMenu) {
    menuBtn.classList.add("close");
    menu.classList.add("show");
    menuNav.classList.add("show");
    menuBranding.classList.add("show");
    navItems.forEach(item => item.classList.add("show"));

    // Set Menu State
    showMenu = true;
  } else {
    menuBtn.classList.remove("close");
    menu.classList.remove("show");
    menuNav.classList.remove("show");
    menuBranding.classList.remove("show");
    navItems.forEach(item => item.classList.remove("show"));

    // Set Menu State
    showMenu = false;
  }
}

Answer 1

嗯，您不必做所有这些事情。只需创建另一个叠加层div并在其中添加链接，然后使其不显示即可。

.overlay{
position: fixed; 
display: none;
width: 100%; 
height: 100%; 
top: 0; 
left: 0;
right: 0;
bottom: 0;
z-index: 2;
background: #333;
}

然后将事件侦听器添加到链接标记，并使覆盖图不显示，仅此而已。

单击链接时关闭全屏菜单覆盖

1 个答案: