ワードプレスでハンバーガーメニューのページ内リンクを押してもメニューが閉じない

Question

ワードプレスでハンバーガーメニューのページ内リンクを押してもメニューが閉じなくて困っています。解決法をご教授ください。

PHP
<!--メニュー-->
<div id="navArea">
<?php wp_nav_menu(array( 'theme_location' => 'header-nav', 'container' => 'nav', 'container_class' => 'header-nav', 'container_id' => 'header-nav', 'fallback_cb' => '' )); ?>
<!--トグルボタン-->
<div class="nav-button">
<span></span>
<span></span>
<span></span>
</div>
</div>

CSS
nav {
position: fixed;
top: -100%;
left: 0;
z-index: 2;
display: block;
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 70%;
background-color: #ffffff;
text-align: center;
opacity: 0;
transition: all 1s;
}

.open nav {
top: 0;
opacity: 1;
}

.nav-button {
position: relative;
z-index: 3;
padding-top: 2.5rem;

.nav-button span {
position: absolute;
display: block;
width: 6rem;
height: 1px;
background-color: #000000;
transition: all .75s;
}

.nav-button span:nth-child(1) {
top: 0;
}

.nav-button span:nth-child(2) {
top: 50%;
transform: translateY(-50%);
}

.nav-button span:nth-child(3) {
bottom: 0;
}

.open .nav-button span:nth-child(1) {
top: 50%;
transform: translateY(-50%) rotate(-330deg);
}

.open .nav-button span:nth-child(2) {
top: 50%;
background-color: transparent;
transform: translateY(-50%);
}

.open .nav-button span:nth-child(3) {
bottom: 50%;
transform: translateY(50%) rotate(330deg);
}

JavaScript
let nav = document.querySelector("#navArea");
let btn = document.querySelector(".nav-button");

btn.onclick = () => {
nav.classList.toggle("open");
};

Answer 1

下記でどうでしょう。

let navlink = document.querySelector("#navArea a");
navlink.onclick = () => {
nav.classList.remove("open");
}; 

Comments

[jka]

ありがとうございます。
いただいた回答を少しアレンジさせていただき解決しました。

let navlink = document.querySelector("#navArea a[href^='#']");
navlink.onclick = () => {
nav.classList.remove("open");
};