我们如何通过外部单击关闭切换菜单 [英] How can we close a toggle menu with an outside click

问题描述

我是编码的新手，我的网站看起来不错（ https://garibpathshala.in/ ）以及用于移动设备的导航菜单。

I'm new to coding, I am have a made a decent looking website (https://garibpathshala.in/) with a toggle nav menu for mobiles.

有什么方法可以让我们在菜单外单击以关闭菜单。

is there any way so that if we click outside the menu it'll close the menu.

请查看我的代码并为我提供帮助：）

Please have a look at my code and help me :)

HTML

      <ul class="header-nav-links">
    <li class="active"><a href="https://garibpathshala.in">HOME</a></li>
    <li><a href="#projects_section">PROJECTS</a></li>
    <li><a href="#meet_the_team_section">TEAM</a></li>
    <li><a href="#about_us_section">ABOUT</a></li>
    <li><a href="https://gallery.garibpathshala.in">GALLERY</a></li>
    <li><a href="https://contact.garibpathshala.in">CONTACT</a></li>
    <li><a href="https://donate.garibpathshala.in">DONATE</a></li>
    <li><a href="https://join.garibpathshala.in">JOIN US</a></li>
   </ul>
  
   <div class="burger">
      <div line1></div>
      <div line2></div>
      <div line3></div>
    </div>

JS

const burger = document.querySelector(".burger");
const navLinks = document.querySelector(".header-nav-links");
const links = document.querySelectorAll(".header-nav-links li");

//Toggle Nav
burger.addEventListener("click", () => {
    navLinks.classList.toggle("open");

//Animate Links
links.forEach((link, index) => {
    if (link.style.animation) {
        link.style.animation = ""
    }else{
        link.style.animation = `navLinkFade 0.5s ease forwards ${index / 7+0.2}s`;
    }
});
});

这是导航菜单的屏幕截图

推荐答案

您可以删除打开如果 event.CurrentTarget 不是汉堡包菜单，则单击菜单中的类，然后单击文档中的其他任何内容（html或正文）。

You could remove "open" class from the menu if the event.CurrentTarget is not the hamburger menu and anything else in the document (html or body) is clicked.

您还需要在 .hamburger 和 navLinks 上 stopImmediatePropagation $ c>本身可以阻止将其注册为对身体的点击，因为它们是身体的子代，否则该事件会冒泡到身体。
MDN参考： https：//developer.mozilla .org / zh-CN / docs / Web / API / Event / bubbles

You would also need to stopImmediatePropagation on the .hamburger and navLinks itself to stop those from being registered as clicks to the body, since they are children of the body and the event would otherwise bubble up to the body. MDN reference: https://developer.mozilla.org/en-US/docs/Web/API/Event/bubbles

const burger = document.querySelector(".burger");
const navLinks = document.querySelector(".header-nav-links");
const links = document.querySelectorAll(".header-nav-links li");
const body = document.querySelector('html');

//Toggle Nav
burger.addEventListener("click", (e) => {
    navLinks.classList.toggle("open");
    e.stopImmediatePropagation();

    //Animate Links
    links.forEach((link, index) => {
        if (link.style.animation) {
            link.style.animation = "";
        }else{
            link.style.animation = `navLinkFade 0.5s ease forwards ${index / 7+0.2}s`;
        }
    });
});

navLinks.addEventListener("click", (eve) => {
     eve.stopImmediatePropagation();
});

body.addEventListener("click", (ev) => {

      if (ev.currentTarget != burger) {
          navLinks.classList.remove("open");
      }
});

.burger {
    display: block;
    cursor:pointer;
}

.header-nav-links {
    display: block;
}

.header-nav-links.open {
    transform: translateX(0%);
}

 
.header-nav-links {
    right: 0;
    position: fixed;
    height: 92vh;
    top: 16vh;
    background-color: rgba(0, 0, 0, 0.7);
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 50%;
    transform: translateX(100%);
    transition: transform 0.5s ease-in;
}

.header-nav-links li {
    list-style-type: none;
}

.header-nav-links li:hover {
    border: 1px solid #fff;
    border-radius: 6pc;
    background-color: #007bff;
}

.header-nav-links a {
    color: whitesmoke;
    text-decoration: none;
    font-family: Arial, sans-serif;
    font-weight: normal;
    font-size: 16px;
    border: 0px solid white;
    transition: 400ms;
    padding: 5px 15px;
    border-radius: 19px; 
}

<ul class="header-nav-links">
    <li class="active"><a href="https://garibpathshala.in">HOME</a></li>
    <li><a href="#projects_section">PROJECTS</a></li>
    <li><a href="#meet_the_team_section">TEAM</a></li>
    <li><a href="#about_us_section">ABOUT</a></li>
    <li><a href="https://gallery.garibpathshala.in">GALLERY</a></li>
    <li><a href="https://contact.garibpathshala.in">CONTACT</a></li>
    <li><a href="https://donate.garibpathshala.in">DONATE</a></li>
    <li><a href="https://join.garibpathshala.in">JOIN US</a></li>
</ul>
  
<div class="burger">
  BURGER
  <div line1></div>
  <div line2></div>
  <div line3></div>
</div>

这篇关于我们如何通过外部单击关闭切换菜单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！