ページ内リンクの時もメニューを閉じたい

Question

下記のjavascriptとCSSを使用して、ハンバーガを開くとブラウザ全体に背景色が広がるメニューを実装しました。しかし、ページ内リンクで遷移した際に背景色とメニューが残ったままになってしまいます。
色々調べて試してみたりもしましたが、うまくいきません。。

どなたかご教授いただけないでしょうか。
よろしくお願いいたします。

html

<div id="togglemenu">
<ul>
<li><a href=="#link1></a></li>
</ul>
</div>
<a class="menu-trigger" href="#">
<span></span>
<span></span>
<span></span>
</a>

javascript

<script type="text/javascript">
jQuery(function(){
     jQuery('.menu-trigger').on('click', function() {
         jQuery(this).toggleClass('active');
         jQuery("#togglemenu").fadeToggle();
         return false;
     });
});
</script>

CSS

.menu-trigger,
.menu-trigger span {
 display: inline-block;
 transition: all .4s;
 box-sizing: border-box;
}
.menu-trigger {
 position: fixed;
	top:18px;
	right:30px;
	position:absolute;
 width: 40px;
 height: 40px;
 z-index: 999999;
 background-color:transparent;
 border-radius: 4px;
}
a.menu-trigger:hover{
 background-color:transparent;
}
.menu-trigger span {
 position: absolute;
 z-index: 9999;
 left: 8px;
 width: 75%;
 height: 2px;
 background-color: #fff;
}
.menu-trigger span:nth-of-type(1) {
 top: 18px;
}
.menu-trigger span:nth-of-type(2) {
 top: 28px;
}
.menu-trigger span:nth-of-type(3) {
 bottom:0px;
}
.menu-trigger.active span:nth-of-type(1) {
 -webkit-transform: translateY(10px) rotate(-45deg);
 transform: translateY(10px) rotate(-45deg);
}
.menu-trigger.active span:nth-of-type(2) {
 opacity: 0;
}
.menu-trigger.active span:nth-of-type(3) {
 -webkit-transform: translateY(-10px) rotate(45deg);
 transform: translateY(-10px) rotate(45deg);
}
.menu-menu-1-container{
  width: 100vw;
 height:100%;
 margin:0 auto;
}
#togglemenu{
 display: none;
  width: 100vw;
 height:100%;
 position: fixed;
 top: -30px;
 z-index: 999999;
background: transparent;
 padding: 0;
  box-sizing: border-box;
}
#togglemenu ul.menu{
 float:none;
 text-align: center;
background-color:rgba(0,0,0,0.9);
margin:0 auto;
width:100%;
height:100%;
padding-top:80px;
}
#togglemenu ul.menu li{
 padding-left: 0px;
 list-style-type: none;
 margin-top: 50px;
 display:block;
}
#togglemenu ul.menu li a{
 color: #fff;
 text-decoration: none;
 font-size: 26px;
}

Answer 1

    jQuery('a:not(.menu-trigger)').on('click', function(event) {
        jQuery('.menu-trigger').trigger('click');
    });

Comments

[heyhey...]

希望通りの表示になりました！！！！！誠にありがとうございます！！！！！