javascript - 如何在使用JS点击链接时关闭CSS菜单？

Question

所以我制作了一个纯 CSS 菜单，除了单击链接时之外，一切都看起来像我想要的那样。在我的单页面布局中，单击链接会导航到页面的某个部分，但单击链接后，它只会平滑滚动到该部分，并且菜单仍然可见。我读过多个类似的问题，但没有一个解决方案对我有用。我更喜欢使用 JavaScript 而不是 jQuery。

我的网站仍在运行中；检查一下，看看移动尺寸上会发生什么 https://www.itsalaam.com/

这是我的代码:

/* NAVIGATION */
.header {
    width: 100%;
    position: fixed;
    top: 0;
    background: linear-gradient(rgba(0, 0, 0, 0.7), transparent);
    z-index: 999;
    overflow: hidden;
    /* transition: background .2s ease-out; */
}
.header ul {
    margin: 0;
    padding: 0;
    list-style: none;
    overflow: hidden;
}
.header ul a {
    display: block;
    padding: 15px;
    text-align: center;
    color: rgb(224, 224, 224);
    font-size: 1.7rem;
}
.header ul a:hover {
    color: #fff;
}
.header .logo {
    float: left;
    display: block;
    padding-top: 15px;
    padding-left: 30px;
}
.header .logo img {
    width: 50px;
    transition: width .5s ease;
}
.header .menu {
    clear: both;
    float: right;
    max-height: 0;
    text-align: center;
    width: 100%;
    transition: max-height .2s ease-out;
    transition: background 0.2s ease-out;
}
.header .menu-icon {
    padding: 28px 20px;
    position: relative;
    float: right;
    cursor: pointer;
    /*menu-icon serves as the parent element of the span nav-icon the is nested within. so the span is the child element*/
}
.header .menu-icon .nav-icon {
    /*creates the middle bar of the nav-icon*/
    background: #fff;
    display: block;
    height: 2px;
    width: 18px;
    position: relative;
    transition: background .2s ease-out;
}
.header .menu-icon .nav-icon:after,
.header .menu-icon .nav-icon:before {
    background: #fff;
    content: "";
    display: block;
    height: 100%;
    width: 100%;
    position: absolute;
    transition: all .2s ease-out;
}
.header .menu-icon .nav-icon:before {
    top: 5px;
}
.header .menu-icon .nav-icon:after {
    top: -5px;
}
.header .menu-btn {
    display: none;
}
.header .menu-btn:checked~.menu {
    /* the ~ selects the next sibling  */
    max-height: 100vh;
    background: #000;
    z-index: 99;
    transition: background 0.2s ease-out;
    /*because the max height was set to 0 on the .menu once the menu-btn is checked, the for attribute must match the id of the input checkbox. so when you click the label it targets the check box, which was set to display none.*/
}
/* the X for closing */
.header .menu-btn:checked~.menu-icon .nav-icon {
    background: transparent;
}
/*middle line disappears*/
.header .menu-btn:checked~.menu-icon .nav-icon:before {
    transform: rotate(-45deg);
    top: 0;
}
.header .menu-btn:checked~.menu-icon .nav-icon:after {
    transform: rotate(45deg);
    top: 0;
}

<header class="header">
      <a href="index.html" class="logo"><img src="/img/globeWireframe.png" alt="salaam" /></a>
      <input type="checkbox" class="menu-btn" id="menu-btn" />
      <label for="menu-btn" class="menu-icon"><span class="nav-icon"></span></label>
      <ul class="menu">
        <li><a href="#" class="current">Home</a></li>
        <li><a href="#about">About</a></li>
        <li>
          <a href="#" type="button" data-toggle="modal" data-target="#exampleModal">Resume</a>
        </li>
        <li><a href="#projects">Projects</a></li>
        <li><a href="#contact">Contact</a></li>
      </ul>
    </header>
    
  

Answer 1

使用Javascript:
1. 获取复选框以供稍后使用。
2. 获取菜单中的所有链接。
3. 为每个链接添加一个事件监听器，以在单击时取消选中复选框，因为只有选中该复选框时才会显示菜单。

// Run once everything is loaded
window.onload = function() {
    // Get the checkbox
    let chk = document.getElementById('menu-btn');
    // Get all menu links
    let menuLinks = document.querySelectorAll('.menu li a');
    // Loop on links
    menuLinks.forEach(function(item) {
        // Add event listener to each links
        item.addEventListener('click', function() {
            // When link is clicked, uncheck the checkbox to hide menu
            chk.checked=false;
        });
    });
}

/* NAVIGATION */
.header {
    width: 100%;
    position: fixed;
    top: 0;
    background: linear-gradient(rgba(0, 0, 0, 0.7), transparent);
    z-index: 999;
    overflow: hidden;
    /* transition: background .2s ease-out; */
}
.header ul {
    margin: 0;
    padding: 0;
    list-style: none;
    overflow: hidden;
}
.header ul a {
    display: block;
    padding: 15px;
    text-align: center;
    color: rgb(224, 224, 224);
    font-size: 1.7rem;
}
.header ul a:hover {
    color: #fff;
}
.header .logo {
    float: left;
    display: block;
    padding-top: 15px;
    padding-left: 30px;
}
.header .logo img {
    width: 50px;
    transition: width .5s ease;
}
.header .menu {
    clear: both;
    float: right;
    max-height: 0;
    text-align: center;
    width: 100%;
    transition: max-height .2s ease-out;
    transition: background 0.2s ease-out;
}
.header .menu-icon {
    padding: 28px 20px;
    position: relative;
    float: right;
    cursor: pointer;
    /*menu-icon serves as the parent element of the span nav-icon the is nested within. so the span is the child element*/
}
.header .menu-icon .nav-icon {
    /*creates the middle bar of the nav-icon*/
    background: #fff;
    display: block;
    height: 2px;
    width: 18px;
    position: relative;
    transition: background .2s ease-out;
}
.header .menu-icon .nav-icon:after,
.header .menu-icon .nav-icon:before {
    background: #fff;
    content: "";
    display: block;
    height: 100%;
    width: 100%;
    position: absolute;
    transition: all .2s ease-out;
}
.header .menu-icon .nav-icon:before {
    top: 5px;
}
.header .menu-icon .nav-icon:after {
    top: -5px;
}
.header .menu-btn {
    display: none;
}
.header .menu-btn:checked~.menu {
    /* the ~ selects the next sibling  */
    max-height: 100vh;
    background: #000;
    z-index: 99;
    transition: background 0.2s ease-out;
    /*because the max height was set to 0 on the .menu once the menu-btn is checked, the for attribute must match the id of the input checkbox. so when you click the label it targets the check box, which was set to display none.*/
}
/* the X for closing */
.header .menu-btn:checked~.menu-icon .nav-icon {
    background: transparent;
}
/*middle line disappears*/
.header .menu-btn:checked~.menu-icon .nav-icon:before {
    transform: rotate(-45deg);
    top: 0;
}
.header .menu-btn:checked~.menu-icon .nav-icon:after {
    transform: rotate(45deg);
    top: 0;
}

<header class="header">
      <a href="index.html" class="logo"><img src="/img/globeWireframe.png" alt="salaam" /></a>
      <input type="checkbox" class="menu-btn" id="menu-btn" />
      <label for="menu-btn" class="menu-icon"><span class="nav-icon"></span></label>
      <ul class="menu">
        <li><a href="#" class="current">Home</a></li>
        <li><a href="#about">About</a></li>
        <li>
          <a href="#" type="button" data-toggle="modal" data-target="#exampleModal">Resume</a>
        </li>
        <li><a href="#projects">Projects</a></li>
        <li><a href="#contact">Contact</a></li>
      </ul>
    </header>