ドロワーメニュー ページ内リンクをクリックで閉じたい

Question

前提・実現したいこと

ドロワーメニューのページ内リンクをクリックした時にメニューを閉じるようにしたいです。

ドロワーメニュー内のリンクをクリックすると該当箇所まで移動はしますが、メニューが閉じずに開いたままになってしまいます。

該当のソースコード

<div class="drawer_menu">
<div class="menu-trigger">
<span></span>
<span></span>
<span></span>
</div>
<nav>
<ul>
<li><a href="#○">○○○○</a></li>
<li><a href="#○">○○○○</a></li>
<li><a href="#○">○○○○</a></li>
<li><a href="#○">○○○○</a></li>
<li><a href="#○">○○○○</a></li>
<li><a href="#○">○○○○</a></li>
<li><a href="#○">○○○○</a></li>
</ul>
</nav>
<div class="overlay"></div>
</div>

.overlay {
	content: "";
	display: block;
	width: 0;
	height: 0;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 2;
	opacity: 0;
	transition: opacity .5s;
}

.overlay.open {
	width: 100%;
	height: 100%;
	opacity: 1;
}

main {
	height: 100%;
	min-height: 100vh;
	background-color: #eee;
	transition: all .5s;
}

main.open {
	transform: translateX(-250px);
}

.menu-trigger {
	display: inline-block;
	width: 36px;
	height: 28px;
	vertical-align: middle;
	cursor: pointer;
	position: absolute;
	top: 10px;
	right: 0;
	z-index: 999;
}
.menu-trigger span {
	display: inline-block;
	box-sizing: border-box;
	position: absolute;
	left: 0;
	width: 100%;
	height: 4px;
    background-color: rgb(16, 69, 153, 1);
	transition: all .5s;
}
.menu-trigger.active span {
	background-color: #fff;
}
.menu-trigger span:nth-of-type(1) {
	top: 0;
}
.menu-trigger.active span:nth-of-type(1) {
	transform: translateY(12px) rotate(-45deg);
}
.menu-trigger span:nth-of-type(2) {
	top: 12px;
}
.menu-trigger.active span:nth-of-type(2) {
	opacity: 0;
}
.menu-trigger span:nth-of-type(3) {
	bottom: 0;
}
.menu-trigger.active span:nth-of-type(3) {
	transform: translateY(-12px) rotate(45deg);
}
.drawer_menu nav {
	width: 350px;
	height: 100%;
	padding-top: 100px;
	background-color: rgb(68, 85, 142, 0.95);
	position: fixed;
	top: 0;
	right: 0;
	z-index: 10;
	transform: translate(350px);
	transition: all .5s;
}
.drawer_menu nav.open {
	transform: translateZ(0);
}
.drawer_menu nav ul {
    padding: 30px;
}
.drawer_menu nav li {
    text-align: left;
    font-size: 1.8rem;
}
.drawer_menu nav li a {
    color: #fff;
    display: block;
    padding: 3% 0;
}

$(function() {
	$('.menu-trigger').on('click', function() {
		if ($(this).hasClass('active')) {
			$(this).removeClass('active');
			$('main').removeClass('open');
			$('nav').removeClass('open');
			$('.overlay').removeClass('open');
		} else {
			$(this).addClass('active');
			$('main').addClass('open');
			$('nav').addClass('open');
			$('.overlay').addClass('open');
		}
	});
	$('.overlay').on('click', function() {
		if ($(this).hasClass('open')) {
			$(this).removeClass('open');
			$('.menu-trigger').removeClass('active');
			$('main').removeClass('open');
			$('nav').removeClass('open');
		}
	});
});

試したこと

同じような質問を閲覧したり、調べたりして試してみたのですがなかなかうまくいきませんでした。
JavaScript初心者のためご教示いただけましたら幸いです。

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

ここにより詳細な情報を記載してください。

Answer 1

    $('nav').on('click', 'a[href^="#"]', function(event) {
        $('.overlay').trigger('click');
    });

Comments

[asdfdsa]

x_x 様
ご教示頂きありがとうございます。
すみません、どこの部分に該当コードを追加すれば良いかご教示いただけないでしょうか。
コードをしっかりと理解せず使用していて、記述箇所が分かりませんでした。
お手数をおかけしてしまい申し訳ございません。
よろしくお願いいたします。

[x_x]

どこでも動きそうな気がしますが、おすすめは最後の }); の直前ですかね

[asdfdsa]

早速のご返信ありがとうございます。
ご教示頂いた内容で追加したところ、希望通りの動きになりました。
ありがとうございます。

度々すみません、1点お聞きしたいのですが
現在提示したコードと同じJSファイルでページ内リンクの記述を新たに追加したところ教示いただいたコードが反映されなくなってしまいました。
ページ内リンクの記述のどの部分を修正したら問題なく動かす事が出来ますでしょうか。

重ね重ねお手数をおかけいたしますがご教示頂けますと幸いです。

ページ内リンクの記述
-----------------------------------------------------------
$('a[href^="#"]').click(function(){
var speed = 500;
var href= $(this).attr("href");
var target = $(href == "#" || href == "" ? 'html' : href);
var headerHeight = 99; //固定ヘッダーの高さ
var position = target.offset().top - headerHeight;
$("html, body").animate({scrollTop:position}, speed, "swing");
return false;
});
-----------------------------------------------------------

[x_x]

return false;となっているためですが、すでにあるのであれば改めてイベントリスナーは追加せず、その中で書いたほうがいいかと思います。
$('.overlay').trigger('click');

[asdfdsa]

ご教示いただいた内容で問題なく動かすことができました。
この度はご多忙の折にもかかわらずご丁寧に教示いただき、ありがとうございます。
なんとお礼を申し上げてよいのか感謝してもしきれません。

またご相談させて頂くこともあるかと存じますが、その際には何卒よろしくお願い致します。