ハンバーガーメニューをクリックしたら閉じるようにしたい

Question

前提・実現したいこと

jqueryで調べたソースコードをコピペしてきたのですが
ハンバーガーメニューのリンクをクリックして、ページ内リンクしたあとスクロールで上まで戻るとメニューが出たままになってしまっています。
クリックしたら閉じるようにするにはどこにどう記述すればいいんでしょうか。

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

エラーメッセージ

該当のソースコード

<div id="target">
　　<div class="target_inner">
　　　　<span class="target_inner_line target_inner_1" id="line1"></span>
　　　　<span class="target_inner_line target_inner_2" id="line2"></span>
　　　　<span class="target_inner_line target_inner_3" id="line3"></span>
　　</div>
<nav class="nav" id="nav_f">
		<ul>
		<li><a href="#header">HOME</a></li>
		<li><a href="#drink">DRINK</a></li>
		<li><a href="#food">FOOD</a></li>
		<li><a href="#access">ACCESS</a></li>
		<li><a href="#contact">CONTACT</a></li>
	</ul></nav>
</div>

.target_inner{
    width: 40px;
    height: 30px;
    position: relative;
	z-index: 2;
	
}

.target_inner_line {
    display: block;
    width: 40px;
    height: 5px;
    background: #fff;
    -webkit-transition: 1.5s;
    transition: 1.5s;
    border-radius: 50px;
    position: absolute;
}

.target_inner_1 {
    top: 0;
}

.target_inner_2 {
    top: 13px;
}

.target_inner_3 {
    top: 26px;
}


.fadein{
    -webkit-transform: translateX(100%);
    transform: translateX(100%);
}

.linea,.lineb,.linec{
    background: #ffffff;
}

.linea {
    -webkit-transform: rotate(225deg);
    transform: rotate(225deg);
    top: 13px;
}

.lineb {
    opacity: 0;
}

.linec {
    -webkit-transform: rotate(-225deg);
    transform: rotate(-225deg);
    top: 13px;
}

function hamburger() {
　　document.getElementById('line1').classList.toggle('linea');
　　document.getElementById('line2').classList.toggle('lineb');
　　document.getElementById('line3').classList.toggle('linec');
　　document.getElementById('target').classList.toggle('slidex');
　　document.getElementById('nav_f').classList.toggle('fadein');
}

document.getElementById('target').addEventListener('click', function () {
　　hamburger();
});
let list = document.getElementsByClassName('list');

for (let i = 0; i < list.length; i++) {
　　list[i].addEventListener('click', function () {
　　　　hamburger();
    });
}
	</script>
	<script type="text/javascript">
$(function(){
	$('a[href^=#]').click(function(){
		var speed = 500;
		var href= $(this).attr("href");
		var target = $(href == "#" || href == "" ? 'html' : href);
		var position = target.offset().top;
		$("html, body").animate({scrollTop:position}, speed, "swing");
		return false;
	});
});
</script>

試したこと

ここに問題に対して試したことを記載してください。

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

ここにより詳細な情報を記載してください。

Comments

[kei344]

HTMLも質問文にコードブロックで追記してください。

[kei344]

HTMLにlistの部分がありません。また、質問文のコードはそれぞれコードブロックで囲んでいただけませんか？ ```（バッククオート3つ）で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。

[wald]

コードブロックにしました！
質問の仕方まで教えてくださりありがとうございます。

Answer 1

動くサンプル：https://jsfiddle.net/r394mt6v/

---

hatena19さんの回答で「ハンバーガーメニューをクリック」の状況は問題なく動いています。
（そもそも提示のコードだけでは「メニューの開閉」はできていないようですが）

Comments

[wald]

そうなんですね。jqueryは特に初心者なので持ってきたコードを読むこともできずで・・・
すみません。
ありがとうございました。

Answer 2

リンクのクリックイベントに hamburger(); を追加すればいいと思います。

$(function(){
    $('a[href^=#]').click(function(){
        var speed = 500;
        var href= $(this).attr("href");
        var target = $(href == "#" || href == "" ? 'html' : href);
        var position = target.offset().top;
        $("html, body").animate({scrollTop:position}, speed, "swing");
        hamburger(); //追加
        return false;
    });
});

Comments

[wald]

回答ありがとうございます。
hamburger();を追加してみましたが、状態が変わらないです。
（）の中に何か書き込まなければいけないですか？