点击后汉堡菜单不会消失

Question

我面临汉堡菜单的问题。我想让它在单击菜单位置并离开菜单后消失。我是初学者。预先感谢。

CSS

 .burger {
    display: block;
    transition: 0.3s ease-out;
  }

  .burger.active .line:first-child {
    transform: translateX(+300px);
  }

  #menu {
    display: flex;
    position: absolute;
    right: 0;
    flex-direction: column;
    top: 100px;
    height: 400px;
    text-align: center;
    width: 75%;
    z-index: 1;
    transform: translateX(100%);
    transition: 0.3s ease-out;
  }

  #menu.active {
    transform: translateX(0%);
    transition: 0.3s ease-out;
  }

  #menu li {
    font-weight: 500;
    font-size: 28px;
    line-height: normal;
  }

  #menu li a {
    color: #ffffff;
    text-decoration: none;
  }

Javascript

document.querySelectorAll(".filterable_cards img").forEach((image) => {
        image.onclick = () => {
          document.querySelector(".popup-image").style.display = "block";
          document.querySelector(".popup-image img").src =
            image.getAttribute("src");
        };
      });

HTML

 <ul id="menu">
      <li><a href="#home">Home</a></li>
      <li><a href="#about">O mnie</a></li>
      <li><a href="#graphics">Grafika</a></li>
      <li><a href="#contact">Kontakt</a></li>
    </ul>
    <div class="burger">
      <div class="line"></div>
      <div class="line"></div>
      <div class="line"></div>
    </div>

我认为主要需要有关 Javascript 代码的帮助。

Answer 1

const burger = document.querySelector(".burger");
const menu = document.querySelector("#menu");

burger.addEventListener("click", () => {
  menu.classList.toggle("active");
});

document.addEventListener("click", (event) => {
  if (event.target === burger || event.target === menu) {
    return;
  }

  menu.classList.remove("active");
});

Answer 2

您似乎想在单击菜单项后隐藏汉堡菜单。您可能需要在每个菜单项上添加一个事件侦听器，并在单击菜单项时切换

active

类。执行此操作的方法如下：

// JavaScript

// Get the menu items and burger element
let menuItems = document.querySelectorAll('#menu li a');
let burger = document.querySelector('.burger');

// Add an event listener to each menu item
menuItems.forEach((item) => {
  item.addEventListener('click', () => {
    // When a menu item is clicked, remove 'active' class from #menu and burger
    document.querySelector('#menu').classList.remove('active');
    burger.classList.remove('active');
  });
});

// Add click event for the burger menu
burger.addEventListener('click', () => {
  // On click, toggle 'active' class for #menu and burger
  document.querySelector('#menu').classList.toggle('active');
  burger.classList.toggle('active');
});

您还可以在单击外部时隐藏菜单：

// JavaScript

document.addEventListener('click', (event) => {
    let isClickInsideMenu = document.querySelector('#menu').contains(event.target);
    let isClickOnBurger = burger.contains(event.target);

    if (!isClickInsideMenu && !isClickOnBurger) {
        // The click was outside the menu and burger, hide them
        document.querySelector('#menu').classList.remove('active');
        burger.classList.remove('active');
    }
});

上面的代码将跟踪每个菜单项上的点击事件。当检测到单击事件时，它将从菜单和汉堡按钮中删除活动类，从而使它们隐藏。

.active

类中的更改将影响CSS变换属性，提供滑入/滑出动画。

我建议将此 JavaScript 代码添加到 HTML body 标记的末尾，或者将其放置在

DOMContentLoaded

事件之后调用的函数中，以确保在脚本运行之前所有元素都已渲染到 DOM。

祝您学习之旅一切顺利。