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

前提・実現したいこと

スマホ画面にてハンバーガーメニューのページ内リンクをクリックしてスクロールした際ににオープンしているハンバーガーメニューを閉じるようにしたいです。
Jqueryで実装してあります。
必要な場合はhtmlとcssも記載致します、当方jqueryについてわからない事が多く困っております、皆様のご回答おまちしております、宜しくお願い致します。

下記がコードになります。

	
	var
	  winW = $(window).width(),
		winH = $(window).height(),
		nav = $('#mainnav ul a'),
		curPos = $(this).scrollTop();
	
	if (winW > 800){
		var headerH =0;
	}
	else{
		var headerH =70;
	}
	
	$(nav).on('click', function(){
  	var $el = $(this),
		id = $el.attr('href');
 		$('html, body').animate({
   		scrollTop: $(id).offset().top - headerH
 		}, 500);
		if (winW < 890){
			$('#menuWrap').next().slideToggle();
			$('#menuBtn' ).removeClass('close');
		}
 		return false;
	});
	
	$('.panel').hide();
	$('#menuWrap').toggle(function(){
		$(this).next().slideToggle();
		$('#menuBtn').toggleClass('close');
	},
	function(){
		$(this).next().slideToggle();
		$('#menuBtn').removeClass('close');
	});

html

	<div class="inner">
		<div id="headerWrap">
			<h1><a href="#" alt="#" title="#" rel="home"><img src="#" alt="#"></a></h1>
			<nav id="mainnav">
				<p id="menuWrap"><a id="menu"><span id="menuBtn"></span></a></p>
				<div class="panel"><ul><li id="menu-item-665" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home"><a href="https://####/#feature"><strong>メニュー</strong></a></li>
<li id="menu-item-187" class="menu-item menu-item-type-post_type menu-item-object-page"><a href="https://#/store/"><strong>メニュー</strong></a></li>
<li id="menu-item-463" class="menu-item menu-item-type-post_type menu-item-object-page"><a href="https://#/equipment/"><strong>メニュー</strong></a></li>
<li id="menu-item-583" class="menu-item menu-item-type-post_type menu-item-object-page"><a href="https://#/contact/"><strong>メニュー</strong></a></li>
<li id="menu-item-549" class="menu-item menu-item-type-custom menu-item-object-custom"><a target="_blank" href="#"><strong><i class="fab fa-facebook-square"></i> Facebook</strong></a></li>
<li id="menu-item-550" class="menu-item menu-item-type-custom menu-item-object-custom"><a target="_blank" href="#"><strong><i class="fab fa-instagram"></i> Instagram</strong></a></li>
</ul></div>
			</nav>
		</div>
	</div>
</header>

wordpressにて使用しているため関係のないID名とクラス名が増えています。

css


nav#mainnav{
position:relative;
margin-top:19px;
}

nav#mainnav ul{
display:flex;
justify-content:center;
align-items:center;
}

/*nav#mainnav ul li{
float:left;
}*/

nav#mainnav ul li a{
display:block;
height:30px;
padding:5px 20px;
line-height:30px;
font-size:100%;
color:#000000;
}

nav#mainnav ul li a span,nav#mainnav ul li a strong{
display:block;
font-size:90%;
line-height:1.7;
letter-spacing:1.2px;
	font-family:"Hiragino Kaku Gothic W7 JIS2004";
}

nav#mainnav ul li a span{
font-size:70%;
color:#35cc91;
}

nav#mainnav ul li a:hover span, nav#mainnav ul li a:hover{
color:#cdcdcd;
}

nav#mainnav ul ul{
width:160px;
border-top:0;
}

nav#mainnav ul li ul{
display: none;
}

nav#mainnav ul li:hover ul{
display: block;
position: absolute;
top:35px;
text-align:center;
z-index:500;
}

nav#mainnav ul li li{
background:#ffffff;
border-bottom:1px dotted #cdcdcd;
float: none;
width:160px;
height:40px;
line-height:40px;
margin:0;
}

nav#mainnav ul li li:last-child{
border:0;
}

nav#mainnav ul li li a{
width:100%;
height:40px;
padding:0;
line-height:40px;
font-size:95%;
text-align:center;
}

nav#mainnav ul li li a:hover{
color:#cdcdcd;
}

nav div.panel{
display:block !important;
}

a#menu{
display:none;
}

}

#headerWrap{
    display: flex;
    -webkit-display: flex;
}

#headerWrap h1{
margin-right: auto;
}

#headerWrap h1 a img {
width:150px;
height:50px;
vertical-align: middle;
}


/* iPadサイズ以下（1024px）からアコーディオンメニュー
------------------------------------------------------------*/

@media only screen and (max-width:1024px){

#header{
position:fixed;
width:100%;
z-index:500;
}

.panel ul li a strong{
color:#50504b;
}

#headerWrap{
position:relative;
width:100%;
height:70px;
background:#9dc838;
}
	
#header h1{
padding: 10px 0 10px 20px;
z-index:9999;
}
	
#header h2{
padding-top:13px;
}
	
#header h2 img{
max-height:18px;
width:auto !important;
}

a#menu{
display:inline-block;
position:relative;
width:40px;
height:40px;
margin:10px;
}

#menuBtn{
display:block;
position:absolute;
top:60%;
left:50%;
width:18px;
height:2px;
margin:-1px 0 0 -7px;
background:#50504b;
transition:.2s;
}

#menuBtn:before, #menuBtn:after{
display:block;
content:"";
position:absolute;
top:50%;
left:0;
width:18px;
height:2px;
background:#50504b;
transition:.3s;
}

#menuBtn:before{
margin-top:-7px;
}

#menuBtn:after{
margin-top:5px;
}

a#menu .close{
background:transparent;
}

a#menu .close:before, a#menu .close:after{
margin-top:0;
}

a#menu .close:before{
transform:rotate(-45deg);
-webkit-transform:rotate(-45deg);
}

a#menu .close:after{
transform:rotate(-135deg);
-webkit-transform:rotate(-135deg);
}

.panel{
width:100%;
display:none;
overflow:hidden;
position:relative;
left:0;
top:0;
z-index:100;
}

#mainnav{
position:absolute;
top:0;
width:100%;
text-align:right;
z-index:500;
}

#mainnav ul{
background:#ffffff;
text-align:left;
}

#mainnav li a{
position:relative;
display:block;
padding:12px 25px;
border-bottom:1px solid #eeeeee;
color: #000000;
font-weight:bold;
}

#mainnav ul li a span{
display:none;
}

#mainnav ul li li{
border:0;
}

#mainnav ul li li a{
padding-left:40px;
}

}

.content_w{
		margin:30px 0 0 0;
	}