ページ内遷移した際にドロワーメニューを閉じたい

Question

前提・実現したいこと

スマホ用にドロワーメニューを作成しましたが、
ページ内遷移したリンクの場合(#のリンク)、ドロワーメニューが自動で閉じません。
リンククリック後に閉じるにはどのようなJacaScriptを組めばよいでしょうか？

発生している問題・エラーメッセージ

リンク内にページが閉じない

該当のソースコード

<div id="nav-drawer">
	<input id="nav-input" type="checkbox" class="nav-unshown">
	<label id="nav-open" for="nav-input"><i class="fa fa-bars" aria-hidden="true"></i>MENU</label>
	<label class="nav-unshown" id="nav-close" for="nav-input">×<br>閉じる</label>
	
	<div id="nav-content">
		
		<div class="main_menu">
			<nav>
				<ul>
					<li>
						<a href="http://aaaaa.com/page1" title="ページ1">ページ1</a>
						<div class="tree_menu">
							<ul>
								<li><a href="https://aaaaaa.com/page1/#guide" title="ガイド">ガイドへ</a></li>
								<li><a href="https://aaaaaa.com/page1/#guide" title="ガイド">ガイドへ</a></li>
								<li><a href="https://aaaaaa.com/page1/#guide" title="ガイド">ガイドへ</a></li>
							</ul>
						</div>
					
					</li>
					<li>
						<a href="https://aaaaaa.com/page2" title="ページ2">ページ2</a>
						<div class="tree_menu three_clm">
							<ul>
								<li>
									<ul>
										<li><a class="parent" href="https://aaaaaa.com/page2/child/" title="">子ページ</a></li>
										<li><a href="https://aaaaaa.com/page2/child/#info" title="情報">情報</a></li>
										<li><a href="https://aaaaaa.com/page2/child/#info" title="情報">情報</a></li>
										<li><a href="https://aaaaaa.com/page2/child/#info" title="情報">情報</a></li>
									</ul>
								</li>
								<li>
									<ul>
										<li><a class="parent" href="https://aaaaaa.com/page3/child/" title="">子ページ</a></li>
										<li><a href="https://aaaaaa.com/page3/child/#info" title="情報">情報</a></li>
										<li><a href="https://aaaaaa.com/page3/child/#info" title="情報">情報</a></li>
										<li><a href="https://aaaaaa.com/page3/child/#info" title="情報">情報</a></li>
									</ul>
								</li>
								<li>
									<ul>
										<li><a class="parent" href="https://aaaaaa.com/page4/child/" title="">子ページ</a></li>
										<li><a href="https://aaaaaa.com/page4/child/#info" title="情報">情報</a></li>
										<li><a href="https://aaaaaa.com/page4/child/#info" title="情報">情報</a></li>
										<li><a href="https://aaaaaa.com/page4/child/#info" title="情報">情報</a></li>
									</ul>
								</li>
								
							</ul>
						</div>
					</li>
					
				</ul>
			</nav>
		</div>
	</div><!-- nav-content -->
</div>

#nav-drawer {
	position: relative;
	z-index: 300;
}

/*チェックボックス等は非表示に*/
.nav-unshown {
 	display:none;
}

/*アイコンのスペース*/
#nav-open {
	font-size: 16px;
	background: #333;
	border-radius: 5px;
	padding: 5px 10px;
	margin: 0px 10px;
	font-weight: bold;
	color: #FFF;
	display: block;
	top: 70px;
	right: 1%;
	position: fixed;
	z-index: 20;
}

#nav-open i {
	padding-right:10px;
}

/*閉じる用の薄黒カバー*/
#nav-close {
	display: block;/*はじめは隠しておく*/
	position: fixed;
	z-index: 600;
	/*全体に広がるように*/
	width: 100%;
	color: #FFF;
	/*! padding: 2% 0; */
	text-align: center;
	bottom: 110%;
	-webkit-transition: .4s;
	transition: .4s;
	height: 10%;
	background-color: rgba(0,0,0,0.85);
}

/*中身*/
#nav-content {
	overflow: auto;
	position: fixed;
	top: 0;
	z-index: 500;/*最前面に*/
	width: 100%;/*右側に隙間を作る*/
	height: 90%;
	/*背景色*/
	transition: .3s ease-in-out;/*滑らかに表示*/
	-webkit-transform: translatey(-100%);
	transform: translatey(-100%);/*左に隠しておく*/
	background-color: rgba(255,255,255,0.95);
}

/*チェックが入ったらもろもろ表示*/
#nav-input:checked ~ #nav-close {
	/*カバーを表示*/
	bottom: 0%;
}

#nav-input:checked ~ #nav-content {
	-webkit-transform: translatey(0%);
	transform: translatey(0%);/*中身を表示*/
	box-shadow: 6px 0 25px rgba(0,0,0,.15);
}

#nav-content .main_menu{
	width:80%;
	margin:20px auto 0;
}

#nav-content .main_menu a{
	color:#333;
	display:block;
	font-size: 1.6rem;
	font-weight: 600;
	padding-bottom: 10px;
}

#nav-content .main_menu .tree_menu{

	border-top: 1px solid #333;
	padding: 10px 0 20px;
}

#nav-content .main_menu .tree_menu > ul{

	display: flex;
	position: relative;
	flex-wrap: wrap;
	justify-content: space-around;
}


#nav-content .main_menu .tree_menu > ul > li > a{

	font-size: 1.4rem;
	font-weight: 400;
	text-decoration: underline;
}


#nav-content .main_menu .three_clm > ul > li >ul >li >a{

	font-size: 1.4rem;
	font-weight: 400;
	text-decoration: underline;
}

#nav-content .main_menu .three_clm .parent{
	font-size: 1.6rem;
	text-decoration: none;
	font-weight: 600;
}


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

Wordpress 5.4.2

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

Wordpress 5.4.2

Answer 1

まず、このモーダルの開閉の仕組みを確認しましょう。

<input id="nav-input" type="checkbox" class="nav-unshown">

こちらの、チェックボックスがオンになると開き、
オフになると閉じるという動きをしています。

では、次にこのチェックボックスが閉まる関数を書いてみましょう。

function closeNav() {
  document.getElementById('nav-input').checked = false
}

以下のページを参照してみてください。
<input type="checkbox"> - HTML: HyperText Markup Language | MDN

こちらを該当のaタグのonClick属性に挿入すればOKです。

 <li><a href="#guide" title="ガイド" onClick="closeNav()">ガイドへ</a></li>

クリック時の処理(onClick) - イベント処理 - JavaScript入門

もっとシンプルな書き方もあります。
是非調べてみてください。

Comments

[tacchanss]

ご回答ありがとうございます。
ご回答頂いた内容を入れたところ、リンクとして認識されなくなったのか、クリックしてもリンク先に飛ばないようになりました。

z-indexが被っているのかとも思いましたが、違うようです。

他に修正方法御座いますでしょうか？
お力添え頂ければ幸いです。

[退会済みユーザー]

大変失礼しました。仕様上できないものでした。書き直します。

[tacchanss]

ご教示頂きました内容で動きました。
この度はご回答頂きましてありがとうございました。