ハンバーガーメニューについて

Question

前提・実現したいこと

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

該当のソースコード

（html）
<div><!--  class="header-nav" -->
		<nav class="navigation">
			<ul class="nav-list l-horizon">
				<li class="nav-item a"><a href="#rice" onclick='_scrollTo("#rice")'>メニュー１</a></li>
				<li class="nav-item a"><a href="#line-up" onclick='_scrollTo("#line-up")'> メニュー２</a></li>
				<li class="nav-item a"><a href="#customer" onclick='_scrollTo("#customer")'>メニュー３</a></li>
				<li class="nav-item a"><a href="#contact" onclick='_scrollTo("#contact")'>Contact</a></li>
				<li class="nav-item a"><a href="https://www.instagram.com/">Instagram</a></li>		
		</nav>
	</div>
		<button class="btn-trigger">
            <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="#a0a0a0"></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>
            toggle menu
        </button>

（css）
	.btn-trigger{
		display: none;
	}
	.navigation{
		background: none;
    	position: absolute;
    	top: 890px;
		display: flex;
		width: 100%;
    	height: 10px;
		padding: 10px 0 10px;
		
	}
	.nav-list{
		display: flex;
		margin: 0 auto;
		
	}
	.nav-item{
		margin-left: 20px;
		
	}
	.nav-item>a{
		color: #2D2C2C;
		font-family: 'Yu Gothic',sans-serif;
		font-size: 18px;
		text-transform: none;
		
	}
	.a {
  		position: relative;
  		display: inline-block;
  		text-decoration: none;
	}
	.a::after {
  		position: absolute;
  		bottom: -25px;
  		left: 0px;
  		content: '';
  		width: 100%;
  		height: 1px;
  		background: #ef3f98;
  		transform: scale(0, 1);
  		transform-origin: center top;
  		transition: transform .3s;
	}
	.a:hover::after {
  		transform: scale(1, 1);
}

(js)
$(".btn-trigger").on("touchstart",function(){
	$(this).toggleClass("ac");
	if ($(".navigation").hasClass("")){
		$(".navigation").removeClass("open").fadeOut(500);
		
	} else {
		$(".navigation").addClass("open").fadeToggle(500);
	}
});
 });

試したこと

removeClassを付け足しましたが、メニューが消えません。

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

Comments

[kyoya0819]

タグがいろいろ不足しています。
HTML,XHTML,CSS,jQuery

[rinas]

ご指摘いただき、ありがとうございます。
修正させていただきました。

Answer 1

$('.navigation a').on('pointerdown', function(event) {
    $('.btn-trigger').trigger('touchstart');
    return true;
});

https://api.jquery.com/trigger/

Comments

[rinas]

解決することができました！
ずっとわからず悩んでいたので助かりました！
本当にありがとうございます！