ハンバーガーメニューのページ内リンクをクリックしてもメニューが閉じない

Question

前提・実現したいこと

素人ながら、シングルページにてwebサイトを構築中で、wordpressにて作成中です。
動きをつけるにはJavaScriptが必要ということで、少しづつ進めています。
モバイル用のハンバーガーメニュー内のリンクをクリックするとメニューが閉じるようにしたいと考えています。
本を読んだり、似たような質問を見たり調べたりして、こちらにたどり着きました。
JavaScriptに関してはど素人です。何卒よろしくお願いいたします。

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

【現状】
ハンバーガーメニュー内のページ内リンクをクリックとすると該当箇所まで移動するものの、ハンバーガーメニューが閉じずに開いたまま。

【やりたい事】
ハンバーガーメニュー内のリンクをクリックで該当箇所まで移動と同時にハンバーガーメニューを閉じたいです。

該当のソースコード

<header id="home" class="header page-header">
		<div class="header_inner">
			<div class="header_logo">
				<a href="<?php echo home_url(); ?>"><img src="<?php echo get_template_directory_uri(); ?>/assets/img/common/logo.png" alt="hoge"></a>
			</div>
		</div>

		<div class="header_links">
			<nav class="gnav">
				<ul id="soi_menu">
					<li><a href="<?php echo home_url(); ?>">HOME</a></li>
					<li><a href="#hoge">hoge</a></li>
					<li><a href="#hoge">hoge</a></li>
					<li><a href="#hoge">hoge</a></li>
					<li><a href="#hoge">hoge</a></li>
				</ul>
			</nav>
		</div>

		<svg class="header_menu" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
			width="30" height="30" viewBox="0 0 30 30">
			<defs><clipPath id="clip-path"><rect width="30" height="30" fill="none"/></clipPath>
			</defs>
			<g clip-path="url(#clip-path)">
				<rect class="header_border header_border-1" width="30" height="2" transform="translate(0 0)" />
				<rect class="header_border header_border-2" width="30" height="2" transform="translate(0 10)" />
				<rect class="header_border header_border-3" width="30" height="2" transform="translate(0 20)" />
			</g>
		</svg>
	</header>

    var $menu = $('.header_menu');
    var $slideNav = $('.header_links');
    $menu.on('click', function() {
        if ($menu.hasClass('is-active') == false) {
            $slideNav.addClass('is-active');
            $menu.addClass('is-active');
        } else {
            $slideNav.find('.header_nav').hide();
            $slideNav.removeClass('is-active');
            $menu.removeClass('is-active');
            setTimeout(function() {
                $slideNav.find('.header_nav').show();
            }, 1000);
        }
    });

Answer 1

cssがないので恐らくですが、お書きになられたJSを真似ればよろしいのではないでしょうか。

header_linksクラスをもつ要素内のaタグがクリックされたら、is-activeクラスを削除する。

$('.header_links a').on('click', function(){
  $slideNav.removeClass('is-active');
  $menu.removeClass('is-active');
});