ハンバーガーメニュー内のページ内リンクをクリックしたときにメニューを閉じる方法

Question

前提・実現したいこと

ハンバーガーメニュー内のページ内リンクをクリックしたときに、メニューを自動的に閉じたいです。
jQueryは調べたら出てきましたが、JavaScriptで実装する方法を知りたいです。

現状

メニューを開いたまま、ページ内の該当箇所に移動してしまいます。

使用しているのソースコード

const hamburger = document.querySelector(".hamburger");
const navMenu = document.querySelector(".nav-menu_sp");　//メニューの中身

hamburger.addEventListener("click", mobileMenu);

function mobileMenu() {
    hamburger.classList.toggle("active");
    navMenu.classList.toggle("active");
}

const navLink = document.querySelectorAll(".nav-link");

navLink.forEach(n => n.addEventListener("click", closeMenu));

function closeMenu() {
    hamburger.classList.remove("active");
    navMenu.classList.remove("active");
}

<div class="gnav">
  <div class="hamburger">
    <span class="bar"></span>
    <span class="bar"></span>
    <span class="bar"></span>
  </div>
  <div class="nav-menu_sp">
    <!-- メニューの中身 -->
    <ul>
      <li><a href="#about">ABOUT</a></li>
      <li><a href="#topics">TOPICS</a></li>
    </ul>
  </div>
</div>

.gnav {
        padding: 1.5em 1.5em;
        display: flex;
        justify-content: space-between;
        align-items: center;
        background: #000;
        height: 60px;
        position: fixed;
        z-index: 10000;
        
        .nav-menu_sp {
            font-family: $eng;
            display: flex;
            justify-content: center;
            align-items: center;
            background: #000;
            color: #fff;
            position: fixed;
            right: -100%;
            top: 0;
            width: 100%;
            height: 100%;
            transition: 0.3s;
            z-index: 10005;
            text-align: center;

            &.active {
                right: 0;
            }
        }
    
        .hamburger {
            position: relative;
            cursor: pointer;
            z-index: 10010;

            .bar {
                display: block;
                width: 25px;
                height: 3px;
                margin: 5px auto;
                -webkit-transition: all 0.3s ease-in-out;
                transition: all 0.3s ease-in-out;
                background-color: #fff; //バーの色
            }

            &.active {
                .bar {
                    background-color: #fff;
                }
    
                .bar:nth-child(2) {
                    opacity: 0;
                }
    
                .bar:nth-child(1) {
                    transform: translateY(8px) rotate(45deg);
                }
    
                .bar:nth-child(3) {
                    transform: translateY(-8px) rotate(-45deg);
                }
            }
        }
}

補足情報（FW/ツールのバージョンなど）

WordPressで用いる想定です。

Answer 1

const navLink = document.querySelectorAll(".nav-link");

ここで.nav-linkセレクターを使ってますが、HTMLにはそのようなクラスはありません。

HTMLのa要素にclass="nav-link"を付加するか、JSを下記のように書き換えれば動きます。

const navLink = document.querySelectorAll(".nav-menu_sp a");

Comments

[rexpen]

うまく作動することが出来ました！ありがとうございました。