我制作了这个汉堡包菜单，除了我点击链接外，它运行得很好.它不会自动关闭菜单，我总是必须点击链接，然后通过汉堡包按钮关闭菜单.
当我点击导航栏中的一个链接时，如何关闭整个菜单？
这是我的助手:https://codepen.io/Softee/pen/dygGbWy人 请确保处于响应式移动视区中.
谢谢你的帮助.
const menu_btn = document.querySelector('.hamburger');
const mobile_menu = document.querySelector('.mobile-nav');
menu_btn.addEventListener('click', function () {
menu_btn.classList.toggle('is-active');
mobile_menu.classList.toggle('is-active');
});.hamburger{
position:relative;
margin-top: 30px;
margin-left: 50px;
display:block;
width:35px;
cursor:pointer;
appearance:none;
background:none;
outline:none;
border:none
}
.hamburger .bar,.hamburger:after,.hamburger:before{
content:'';
display:block;
width:100%;
height:5px;
background-color:#1B1B1B;
margin:6px 0px;
transition:0.4s
}
.hamburger.is-active:before{
transform:rotate(-45deg) translate(-8px, 6px);
background-color: #1B1B1B;
}
.hamburger.is-active:after{
transform:rotate(45deg) translate(-9px, -8px);
background-color: #1B1B1B;
}
.hamburger.is-active .bar{
opacity:0;
}
.mobile-nav{
position:fixed;
top:0;
left:100%;
width:100%;
min-height:100vh;
display:block;
background: pink;
padding-top:120px;
transition:0.4s
}
.mobile-nav.is-active{
left:0
}
.mobile-nav a{
font-family: hagincaps;
font-size: 32px;
display:block;
margin:0 auto 16px;
text-align:center;
padding:16px 16px;
color:#1B1B1B;
text-decoration:none
}
header .nav_container{
z-index: 8;
position: fixed;
height: 100px;
width: 100%;
align-items: center;
}
header .nav_container nav{
padding-top:32px;
width: 900px;
margin: 0 auto;
display: flex;
justify-content: space-evenly;
}
header .nav_container nav a{
font-family: hagincaps;
text-transform: uppercase;
font-size:28px;
color:757575;
text-decoration:none
}
header .nav_container nav a:hover{
border-bottom: 5px solid white;
border-radius: 10px;
color: white;
}
@media (min-width: 768px){
.mobile-nav{
display:none
}
.hamburger{
display:none
}
}
@media (max-width: 767px){
header .nav_container nav{
display:none
}
}
@media (max-width: 855px){
header .nav_container nav{
width: 800px;
margin: 0 auto;
}
} <header>
<div class="nav_container">
<nav>
<a href="#">1</a>
<a href="#">2</a>
<a href="#">3</a>
<a href="#">4</a>
<a href="#">5</a>
</nav>
<button class="hamburger">
<div class="bar"></div>
</button>
</div>
</header>
<nav class="mobile-nav">
<a href="#">1</a>
<a href="#">2</a>
<a href="#">3</a>
<a href="#">4</a>
<a href="#">5</a>
</nav>