JQuery ナビのリンクがクリックされたらナビを閉じる方法は？

Question

実現したいこと

上から下へ降りてくるナビゲーションのリンクをクリックしたと同時にナビゲーションを上へ折りたたみたい。

発生している問題・分からないこと

とても初歩的で素人な質問をさせて頂きます。
様々な教材を元に、slideToggleイベントでハンバーガーメニューボタンを押してナビゲーションを表示/非表示に切り替える方法を学びました。さらにここに、自作サイトにてメニューを押すとそのコンテンツがある位置へスクロールするよう実装したのですが、ナビゲーションが開いたままなので、肝心のコンテンツが隠れてしまい、不自然であることに気がつきました。
コンテンツリンクを押したと同時にナビゲーションを閉じる方法を知りたいです。

該当のソースコード

$(document).ready(function(){
	$(".hamburger-button").click(function(event){
		$(".sp-nav").slideToggle();
	});
});

<nav class="sp-nav">
          <ul class="sp-nav-list">
            <li><a href="#discography">DISCOGRAPHY</a></li>
            <li><a href="#biography">BIOGRAPHY</a></li>
            <li><a href="#contact">CONTACT</a></li>
          </ul>
        </nav>

<script src="https://code.jquery.com/jquery-3.7.1.min.js" integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo="crossorigin="anonymous"></script>
    <script src="./js/hamburger.js"></script>

試したこと・調べたこと

• teratailやGoogle等で検索した
• ソースコードを自分なりに変更した
• 知人に聞いた
• その他

上記の詳細・結果

現状のコードは添付した3件ですが、
・実現するために必要なjsコードは何か？
・ID、クラス名、HTMLをどのように変えるか？

素人目に検索して出てきたコードを所々編集して弄ってみても、
何も変わらない状態で、困っています。
（何をremoveClassする？現状のコードから変えられる？
そもそも全て書き換える？使用するライブラリを変える？等）
何かいいアイデアはないか、教えて頂けたら助かります。

補足

特になし

Answer 1

popstateをつかってみては？

<script>
$(function(){
  $(".sp-nav").hide();
  $(".hamburger-button").click(function(event){
    $(".sp-nav").slideToggle();
  });
});
$(window).on('popstate',function(){
  $(".sp-nav").slideUp();
});
</script>
<div class="hamburger-button">x</div>
<nav class="sp-nav">
<ul class="sp-nav-list">
<li><a href="#discography">DISCOGRAPHY</a></li>
<li><a href="#biography">BIOGRAPHY</a></li>
<li><a href="#contact">CONTACT</a></li>
</ul>
</nav>

Comments

[takino]

回答ありがとうございます。
ベストアンサーは別の方を選ばせていただきましたが、こちらの回答も非常に参考になりました。

Answer 2

ナビゲーション内のアンカーがクリックされたら「sp-nav」を閉じるコードを追加しましょう。

$(document).ready(function() {
// ハンバーガーメニューボタンのクリックイベント
$(".hamburger-button").click(function(event) {
$(".sp-nav").slideToggle();
});

// ナビゲーションリンクのクリックイベント
$(".sp-nav-list a").click(function(event) {
$(".sp-nav").slideUp();
});
});

Comments

[takino]

ありがとうございます！見事イメージしていたものになりました！！
よく覚えておきます。