スマホメニューをページ内リンクで飛ばした時に閉じる方法

Question

前提・実現したいこと、発生している問題・エラーメッセージ

スマホのハンバーガーメニューを作成しています。
ページ内リンクで、リンク先に飛んだ時にメニューが開いたままの状態になってしまいます。
リンク先に飛ぶと同時に、メニューを閉じたいのですがどのようにすれば良いでしょうか？
（言語選択は別ページに移動予定です）

該当のソースコード

<div class="header-innner">	
   <button type="button" class="btn-trigger none">
     <svg viewBox="0 0 44 44" xmlns:xlink="http://www.w3.org/1999/xlink" role="img" aria-labelledby="menuButtonTitle">
     <title id="menuButtonTitle">Menu</title>
     <symbol id="bar">
     <rect width="28" height="1" fill="#1d1d1d"></rect>
     </symbol>
     <use xlink:href="#bar" x="8" y="14"></use>
     <use xlink:href="#bar" x="8" y="24"></use>
     <use xlink:href="#bar" x="8" y="34"></use>
     </svg>
      Menu
   </button>

   <!--navigation-->
    <div class="header-nav">
     <nav class="navigation text-center">
     <ul class="nav-list lang">
      <li class="nav-item"><a href="#" target="_blank"><span>日本語</span></a></li>
      <li class="nav-item"><a href="#" target="_blank"><span>中文(简体)</span></a></li>
      <li class="nav-item"><a href="#" target="_blank"><span>中文(繁體)</span></a></li>
     </ul>
    <ul class="nav-list">
     <li class="nav-item menu current"><a href="#">Home</a></li>
     <li class="nav-item menu"><a href="#service">Service</a></li>
     <li class="nav-item menu"><a href="#diving_points"> Diving points</a></li>
     <li class="nav-item menu"><a href="#corse">Corse</a></li>
     <li class="nav-item menu"><a href="#contact"> Contact</a></li>
    </ul>
    </nav>
   <!--/navigation-->
    </div>
      </div>

header{
	position: fixed;
	top:0;
	left:0;
	z-index: 100;
	box-sizing: border-box;
	width:100%;
	height: 69px;
	padding: 20px 20px 16px;
	border-top:solid 1px #e2dede;
	border-bottom:solid 1px #e2dede;
	background-color:#fff;
}
.btn-trigger{
	overflow: hidden;
	-webkit-appearance:none;
	-moz-appearance:none;
	appearance:none;
	position: absolute;
	top: 2px;
	right: 2px;
	z-index: 100;
	width:44px;
	padding: 6px 0 0;
	border: none;
	background-color:#fff;
	white-space:nowrap;
	z-index: 102;
}
use{
    -webkit-transition: 0.5s all;
    -moz-transition: 0.5s all;
    -ms-transition: 0.5s all;
    transition: 0.5s all;
}
.btn-trigger.active use:nth-of-type(1) {
    -webkit-transform: translateY(30px) rotate(-45deg);
    transform: translateY(30px) rotate(-45deg);
}
.btn-trigger.active use:nth-of-type(2) {
    opacity: 0;
}
.btn-trigger.active use:nth-of-type(3) {
    -webkit-transform: translateX(35px) translateY(-15px) rotate(45deg);
    transform: translateX(35px) translateY(-15px) rotate(45deg);
}
.header-nav{
	display: none;
	position: absolute;
	top:0;
	left:0;
	width:100%;
	height:120%;
	padding: 120px 0 0;
	background-color: rgba(255,255,255,0.97);
	z-index: 101;
}
.nav-item{
	margin: 0 0 55px;
}

.nav-item>a{
	color:#1b1b1b;
	font-size: 1.4rem;
	text-transform: uppercase;
	text-decoration: none;
}

<script>
  $(".btn-trigger").on("touchstart",function(){
  $(this).toggleClass("active");
  $(".header-nav").fadeToggle(500);
});
</script>

Answer 1

こういう感じでどうでしょう。

$(".nav-item.menu a").on("touchstart",function(){
  $(".btn-trigger").trigger("touchstart");
});

Comments

[torahiro]

早速の回答ありがとうございます。
何時間も悩んでいたのですが、無事に解決できました。
ありがとうございました！