单击锚标记后，我的代码汉堡菜单没有关闭答案

【问题标题】：My code hamburger menu doesn't close after I click an anchor tag单击锚标记后，我的代码汉堡菜单没有关闭
【发布时间】：2021-11-14 07:02:45
【问题描述】：

我是前端新手，所以当我单击某些菜单导航到同一页面但另一个地方时，我试图关闭我的汉堡菜单。请帮我做什么。以下是我的项目代码。这是我为自己制作的作品集，谢谢

<!DOCTYPE html>
<html lang="en">
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta charset="utf-8">
  <title>David Bankole Abel</title>
  <link rel="stylesheet" href="style.css">
  <script src="https://kit.fontawesome.com/50d8f330a2.js" crossorigin="anonymous"></script>
</head>

<body>
 <div class="container">
  <nav>
  <ul class="nav-links">
    <li><a href="index.html">About</a></li>
    <li><a href="#container-frames">Projects</a></li>
    <li><a href="#contact-us">Get in touch</a></li>
  </ul>
  <div class="burger">
    <div class="line1"></div>
    <div class="line2"></div>
    <div class="line3"></div> 
  </div>
</nav>

<section class="intro">

  <h1>Let's find the solution that best fits you...</h1>

</section>

<section class=portfolio>
  <p>Hello, I'm David, a designer and developer from Lagos.
  My dream is to build solutions for global problem, while providing for young people a place to learn and explore their naturally creative side. </p>
</section>

<a name="container-frames"></a>
<div class="container-frames">
  <h6>Selected works</h6>
  <div class="column">
   <a href="https://532services.ng" target="_blank">
     <img src="532serv.jpg"  height="188" alt="ecommerce"></a>
     <h5>Preorder site</h5>
   </div>
   <div class="column">
     <a href="https://1drv.ms/u/s!AgmcHhJeK0Xow14h3ARPShMs_Ado?e=e4Yp1c" target="_blank">
       <img src="ttsunity.jpg" height="188" alt="ecommerce"></a>
       <h5>Mobile game APK</h5>
     </div>
     <div class="column">
      <a href="https://www.figma.com/files/recent" target="_blank">
       <img src="Lambdap.png" height="188" alt="design"></a>
       <h5>UI designs</h5>
     </div>
   </div>

   <a name="contact-us"></a>
   <section class="contact-us">
    <h3>Get in touch</h3>
    <form action="https://formspree.io/f/xnqorqrg" method="POST" id="my-form">      
      <input name="name" type="text" class="feedback-input" placeholder="Name" />   
      <input name="email" type="text" class="feedback-input" placeholder="Email" />
      <textarea name="text" class="feedback-input" placeholder="Enter Message"></textarea>
      <button type="submit">SUBMIT</button>
    </form>
    <div id="status"></div>
  </section>
  </div>

  <footer>
    <a href="https://web.facebook.com/profile.php?id=1412559194" target="_blank" class="fab fa-facebook"></a>
    <a href="https://github.com/davidbankys" target="_blank" class="fab fa-github"></a>
    <a href="https://twitter.com/davidbankys" target="_blank" class="fab fa-twitter"></a>
    <a href="https://www.linkedin.com/in/david-abel-bb222b78/" target="_blank" class="fab fa-linkedin-in"></a>
    <p class="foot">&copy;2021 - David B. Abel</p>
  </footer>

  <script src="app.js"></script>
</body>
</html>

-- 这里是 CSS

@font-face {
 font-family: silka;
 src: url(silka/Silka-Bold.otf);
 font-style: normal;
 font-weight: 700;   
}

@font-face {
 font-family: silka;
 src: url(silka/Silka-Light.otf);
 font-style: normal;
 font-weight: 300;
}

* {
  padding: 0;
  margin-left: 0%;
  box-sizing: border-box;
}

html, body {
  padding: 0;
  margin: 0px;
  height: 100%;
}

nav {
  font-family: silka;
  display: flex;
  justify-content: space-around;
  align-items: center;
  background-color: #fff;
}

.container {
  min-height: 100%
}

h5 {
 margin-left: 10px;
}

h1 {
  font-family: Silka;
  font-weight: 700;
  color: #220077;
  font-size: 550%;
  margin-left: 190px;
  margin-right: 190px;
}

p {
  font-family: Silka;
  font-weight: 300;
  color: #220077;
  text-align: left;
  font-size: 150%;
  margin-left: 190px;
  margin-right: 190px;
}

.nav-links{
  display: flex;
  justify-content: space-evenly;
  width: 40%;
  list-style: none;
}
.nav-links a{
  font-family: silka;
  color: #220077;
  text-decoration: none;
  font-size: 16px;
  padding: 14px 16px;
}
.burger{
  display: none;
  cursor: pointer;
}
.burger div{
  width: 25px;
  height: 3px;
  background-color: #007722;
  margin: 5px;
  transition: all 0.3s ease;
}
@media screen and (max-width: 1024px) {
  .nav-links {
    width: 100%;
  }
}

@media screen and (max-width: 601px) {
  html,body{
    overflow-x: hidden! important;
    position: relative;
  }
  .nav-links {
   position: absolute;
   right: 0px;
   height: 265vh;
   top: -3vh;
   background-color: #007722;
   display: flex;
   flex-direction: column;
   align-items: center;
   width: 100%;
   transform: translateX(100%);
   transition: transform 0.5s ease-in;
   padding-top: 0;
 }
 .burger {
  position: absolute;
  top: 0;
  right: 0;
 }

 .nav-links li{
  opacity: 0;
}

.nav-links a{
  font-family: silka;
  text-decoration: none;
  font-size: 24px;
  padding: 10px 12px;
  color: #fff;
}

.logoo{
  font-family: silka;
  border-radius: 30px;
  margin-left: -98px;
  height: 35px;
  width: 35px;
  margin-bottom: 10px;
}

h5{
 margin-left: 20px;
}

h1 {
  font-family: silka;
  color: #220077;
  font-size: 280%;
  margin-left: 20px;
  margin-right: 20PX;
}

.contact-us form { 
 max-width:90%;
 margin:10px auto;
}

.feedback-input {
  color:black;
  font-family: Helvetica, Arial, sans-serif;
  font-weight:300;
  font-size: 12px;
  border-radius: 2px;
  line-height: 11px;
  background-color: transparent;
  border:2px solid #220077;
  transition: all 0.3s;
  padding: 13px;
  margin-bottom: 15px;
  width:100%;
  box-sizing: border-box;
  outline:0;
}

.feedback-input:focus { border:2px solid #220077; }

textarea {
  height: 150px;
  line-height: 150%;
  resize:vertical;
}

[type="submit"] {
  font-family: 'Montserrat', Arial, Helvetica, sans-serif;
  width: 50%;
  background:#220077;
  border-radius:5px;
  border:0;
  cursor:pointer;
  color:white;
  font-size:12px;
  padding-top:10px;
  padding-bottom:10px;
  transition: all 0.3s;
  margin-top:-4px;
  font-weight:350;
}
[type="submit"]:hover { background:#007722; }


p {
  font-family: silka;
  color: #220077;
  font-size: 150%;
  margin-top: auto;
  margin-bottom: auto;
  margin-left: 20px;
  margin-right: 20px;
}

nav {
  background-color: #fff;
}
.burger{
  display: block;
}
.burger div{
  background-color: #007722;
 }
}

.nav-active{
  transform: translate(0%);
}

@keyframes navLinkFade{
  from{
    opacity: 0;
    transform: translateX(50px);
  }

  to{
    opacity: 1;
    transform: translate(0px);
  }

}

.toggle .line1{
 transform: rotate(-45deg) translate(-5px,6px);
 background-color: #fff;
}
.toggle .line2{
  opacity: 0;
  background-color: #fff;
}
.toggle .line3{
  transform: rotate(45deg) translate(-5px,-6px);
  background-color: #fff;
}

.name {
  color: #220077;
  font-weight: bold;
  margin-left: 8%;  
}

.column {
  float: left;
  width: 32%;
  margin: 1px;
  text-align: left;
  padding: 2px;
  margin-left: 10px;
  height: auto; 
  border-radius: 8px;
}

.container-frames {
  background-color: #220077;
}

h5{
  font-family: silka;
  font-weight: 700;
  font-size: 18;
  color: #fff;
  text-decoration: none;  
}

h6{
  font-family: silka;
  font-weight: 700;
  font-size: 24px;
  margin-left: 190px;
  padding-top: 50px;
  color: #fff;
}


/* Clear floats after the columns */
.container-frames:after {
  content: "";
  display: table;
  clear: both;
  background-color: #220077;
  border-radius: 8px;
}

.contact-us {
  font-family: silka;
}

.contact-us h3 {
  font-size: 24px;
  font-family: silka;
  color: #220077;
  margin-left: 210px;
  text-decoration: none;
}


#status{
  width: 90%;
  max-width: 400px;
  text-align: center;
  padding: 10px;
  margin: 0 auto;
  border-radius: 8px;
}
#status.success{
  background-color: rgb(211, 250, 153);
  animation: status 4s ease forwards;
}
#status.error{
  background-color: rgb(250, 129, 92);
  color: white;
  animation: status 4s ease forwards;
}
@keyframes status{
  0%{
    opacity: 1;
    pointer-events: all;
  }
  90%{
    opacity: 1;
    pointer-events: all;
  }
  100%{
    opacity: 0;
    pointer-events: none;
  }
}


/* Responsive layout - makes the three columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
  .column {
    width: 100%;
  }

  h6 {
    font-family: silka;
    font-weight: 700;
    font-size: 24px;
    margin-left: 20px;
    padding-top: 50px;
  }

  .contact-us h3 {
    margin-left: 20px;
  }

}

img {
 margin: 10px;
 width: 90%;
 border-radius: 4px;
}
body { background:#ffffff; }
form { 
 max-width:70.5%;
 margin:10px auto;
}

.feedback-input {
  color:black;
  font-family: Helvetica, Arial, sans-serif;
  font-weight:300;
  font-size: 12px;
  border-radius: 2px;
  line-height: 11px;
  background-color: transparent;
  border:2px solid #220077;
  transition: all 0.3s;
  padding: 13px;
  margin-bottom: 15px;
  width:100%;
  box-sizing: border-box;
  outline:0;
}

.feedback-input:focus { border:2px solid #220077; }

textarea {
  height: 150px;
  line-height: 150%;
  resize:vertical;
}

[type="submit"] {
  font-family: 'Montserrat', Arial, Helvetica, sans-serif;
  width: 50%;
  background:#220077;
  border-radius:5px;
  border:0;
  cursor:pointer;
  color:white;
  font-size:12px;
  padding-top:10px;
  padding-bottom:10px;
  transition: all 0.3s;
  margin-top:-4px;
  font-weight:350;
}
[type="submit"]:hover { background:#007722; }


footer {
  font-family: silka;
  width: 100%;
  padding: 12px;
  bottom: 0;
  position: fixed;
  background-color:#007722;
}

.foot{
  font-family: silka;
  font-weight: 300;
  font-size: 14px;
  margin-left: 10px;
}

.fab {
  padding: 10px;
  font-size: 13px;
  width: 30px;
  text-align: center;
  text-decoration: none;
  margin: 5px 2px 10px 10px;
  border-radius: 50%;
  background: #fff;
}

.fab:hover { 
  background-color: #007722;;
}


.fa-facebook {
  background: #fff;
  text-decoration: none;
}

.fa-twitter {
  background: #fff;
  text-decoration: none;
}
.fa-linkedin-in {
  background: #fff;
  text-decoration: none;
}
.fa-github {

  background: #fff;
  text-decoration: none;
}

这里是代码的 Javascript

const navSlide = () => {
    const burger = document.querySelector('.burger');
    const nav = document.querySelector('.nav-links');
    const navLinks = document.querySelectorAll('.nav-links li');


    burger.addEventListener('click', () => {
        //Toggle Nav
        nav.classList.toggle('nav-active');

            //Animate links
     navLinks.forEach((link, index) => {
      if (link.style.animation) {
       link.style.animation = '';

     }else {
       link.style.animation = `navLinkFade 0.5s ease forwards ${index / 7 + 1}s`;
     }
   });
      //Burger Animation
      burger.classList.toggle('toggle');
    });
}


navSlide();

window.addEventListener("DOMContentLoaded", function() {

    // get the form elements defined in your form HTML above
    
    var form = document.getElementById("my-form");
    //var button = document.getElementById("my-form-button");
    var status = document.getElementById("satus");

    // Success and Error functions for after the form is submitted
    
    function success() {
      form.reset();
      status.classList.add('success');
      status.innerHTML = "Thanks!";
    }

    function error() {
      status.classList.add('error');
      status.innerHTML = "Oops! There was a problem.";
    }

    // handle the form submission event

    form.addEventListener("submit", function(ev) {
      ev.preventDefault();
      var data = new FormData(form);
      ajax(form.method, form.action, data, success, error);
    });
  });

  // helper function for sending an AJAX request

  function ajax(method, url, data, success, error) {
    var xhr = new XMLHttpRequest();
    xhr.open(method, url);
    xhr.setRequestHeader("Accept", "application/json");
    xhr.onreadystatechange = function() {
      if (xhr.readyState !== XMLHttpRequest.DONE) return;
      if (xhr.status === 200) {
        success(xhr.response, xhr.responseType);
      } else {
        error(xhr.status, xhr.response, xhr.responseType);
      }
    };
    xhr.send(data);
  }

    enter code here

【问题讨论】：

标签： javascript html css frontend

【解决方案1】：

这是解决方案。我为所有 ul 项目 (li) 上的单击事件添加了一个事件侦听器，并在单击 (li) 删除类 .nav-active 后生成函数。

document.querySelectorAll('ul.nav-links li').forEach(element => element.addEventListener('click', () => {
      document.querySelector('ul.nav-links').classList.remove('nav-active');
   })
);

【讨论】：