单击其中的链接（导航链接）时，如何关闭整个导航？

Question

我有这个用 html 和 scss 制作的导航菜单，但是一切正常，但是当我单击导航菜单内的链接时，导航菜单不会关闭以显示页面内容。它仍然覆盖页面上的内容。简而言之，我希望在单击链接时关闭导航菜单。
我的 HTML 代码

    <input type="checkbox" class="navigation__checkbox" id="navi-toggle">
    <label for="navi-toggle" class="navigation__button">
                  <span class="navigation__icon">&nbsp;</span>
    </label> 
    <div class="navigation__background">&nbsp;</div>
    <div class="navigation__nav">
      <div class="container-fluid" id="hd">
      <div class="row">
        <div class="col-9 col-md-5 col-lg-5" id="both">
          <h6 class="fw-b" id="in-nav">-on the web- </h6>
          <div class="social-links fs-5 mb-4 end text-dark">
            <i class="bi bi-twitter"></i>
            <i class="bi bi-facebook"></i> 
             <i class="bi bi-github"></i><br>  
            <i class="bi bi-linkedin"></i>          
            <i class="bi bi-instagram"></i>
            <i class="bi bi-medium"></i>
        </div>
        <div class="mb-4">
  <a class="resume" href="afolabi-resume.pdf" target="_blank" rel="noopener noreferrer">Resume ????</a>
        </div>    
      </div>  
        <div class="col-5 col-md-6 col-lg-6">
          <div class="list">
            <h6 class="fw-b" id="in-nav" style="margin-left:2rem;">-navigation-</h6>
            <ul class="ul">
              <li class="list-item"><a href="/" id="c" >Home</a></li>  
              <li class="list-item"><a href="#projects" id="c">Projects</a></li>
              <li class="list-item"><a href="#stacks" id="c">Stacks</a></li>
              <li class="list-item"><a href="#social-links" id="c">Contact</a></li>
            </ul>
        </div>
        </div>
      </div>
    </div>
  </div>
  </div> ```



**SCSS**


    .navigation {
    overflow-y: hidden;
  
      &__checkbox {
          display: none;
  
      }
      &__button {
          background-color: rgb(0, 0, 0);
          height: 4.5rem;
          width: 4.5rem;
          border-radius: 50%;
          position: fixed;
          top: 2rem;
          right: 6rem;
          z-index: 2000;
          box-shadow: 0 1rem 3rem rgba(#000, .2);
          text-align: center;
          cursor: pointer;
      }
  
      &__background {
        z-index: 500;
          background-color: #006274;
          background-image: url("download.png");
          background-size: 20px;
          animation: bg1 150s linear 1s infinite alternate-reverse;
          height: 2.8rem;
          width: 2.8rem;
          border-radius: 50%;
          position: fixed;
          top: 3.2rem;
          right: 6.8rem;
          transition: transform .9s cubic-bezier(0.86, 0, 0.07, 1);
      }
      @keyframes bg1{
        0% {background-position: 0 0;}
        50% {transform: rotate(300deg 50deg);}
        100% {background-position: 170px 0;}
      }
    
      &__nav {
          height: 100vh;
          position: fixed;
          top: 6.5rem;
          left: 0;
          z-index: 1500;
          opacity: 0;
          width: 0;
          transition: all .8s cubic-bezier(0.68, -0.55, 0.265, 1.55);
      }
  
      &__checkbox:checked ~ &__background {
          transform: scale(80);
      }
  
      &__checkbox:checked ~ &__nav {
          opacity: 1;
          width: 100%;
      }
  
      &__icon {
          right: -.2rem;
          width: 50rem;
          position: relative;
          margin-top: 2.3rem;
  
          &{
            width: 2rem;
            height: 2.3px;
            background-color: rgb(255, 255, 255);
            display: inline-block;
          }
          &::before,
          &::after {
              width: 1.5rem;
              height: 2.3px;
              background-color: rgb(255, 255, 255);
              display: inline-block;
          }
  
          &::before,
          &::after {
              content: "";
              position: absolute;
              left: 0;
              transition: all .2s;
          }
  
          &::before { top: -.6rem }
          &::after { bottom: -.65rem }
      }
  
      &__button:hover &__icon::before {
          top: -.85rem;
      }
  
      &__button:hover &__icon::after {
          bottom: -.9rem;
      }
  
      &__checkbox:checked + &__button &__icon {
          background-color: transparent;
      }
  
      &__checkbox:checked + &__button &__icon::before {
          transform: rotate(135deg);
          top: 0;
      }
  
      &__checkbox:checked + &__button &__icon::after {
          transform: rotate(-135deg);
          bottom: 0;
      }
  }
  
  //navigation list
  
  #hd {
    margin-top: 2rem;
   }
  .resume{
    font-size: 2rem;
    color: #e7e7e7;
    font-family: "montserrat-regular", sans-serif;
    letter-spacing: -2px;
    transition: all .2s ease-in-out;
     }
  .resume:hover {
      text-align: center;
    color: #c5c1c1;
      letter-spacing: 3px;
  }
  #in-nav{
    font-family: "montserrat-regular", sans-serif;
    font-weight: 500;
  }
  #both{
    margin-left: 1.9rem;
  }
  .list h6{
    font-family: "montserrat-regular", sans-serif;
  }
  .ul li {
    list-style: none;
    padding-bottom: .6rem;
   }
  .ul li a {
    color: #2c2c2c;
    text-decoration: none;
    font-size: 2rem;
    font-family: "montserrat-regular", sans-serif;
    text-decoration: none;
    letter-spacing: -.7px;
    cursor: pointer;
    }
    
    #c:hover {
      color: #1d1d1d;
    letter-spacing: 5px; 
    } 
  .social-intro h2, .contact-intro h2{
    font-family: cursive;
  }
  #social-links{
    margin-bottom: 10rem;
  }
  .social-links i{
    margin-right: 1rem;
  }
  .social-links i:hover{
    cursor: pointer;
  }
  .em{
    margin-left: -12rem;
  }
  #contact{
    margin-bottom: 7rem;
  }
  .copyright{
    font-family: "montserrat-regular", sans-serif;
  }
  #ctc h6{
    font-family: "montserrat-semibold", sans-serif;
  }
  #ctc a{
    text-decoration: none;
  }
  #ctc h3{
    color: #fff;
  }
  #ctc h3:hover{
    color: #ee9c3e;
    transition: 0.3s ease-in-out;
  }
  

Answer 1

如果我这样做，我会使用 JavaScript onClick 函数调用来隐藏导航栏最外层的 DIV 元素。

我找到this previous discussion of this very subject which may be worth checking out.

更新

在我之前建立的网站上，这是我使用的代码：在我的 HTML 页面代码中：

<div id="overlay" style="display:block;"></div>
<div id="tos" style="display:block;">

在我添加的 A HREF 链接上：

onclick="toggleOverlay('tos')

JavaScript 代码是

function toggleOverlay(overlay) {
    // Get the DOM reference
    var tosId = document.getElementById(overlay);
    var overlayId = document.getElementById("overlay");
    // Toggle
    tosId.style.display == "block" ? tosId.style.display = "none" : tosId.style.display = "block";
    overlayId.style.display == "block" ? overlayId.style.display = "none" : overlayId.style.display = "block";
}