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

Question

初めまして。プログラミング初心者です。

ハンバーガーメニューの開閉について質問があります。

ハンバーガーメニューのリンクがページ内リンクなのですが、
リンクを押したときに、ハンバーガーメニューが閉じるようにしたいです。

書いてみたのですが、まったく動きません・・
ちなみに、閉じるボタンとメニューエリア以外をタップすると閉じます。

どのように記述を追加すれば良いでしょうか？

<div id="header">
    <nav>
    <ul id="navi" class="center_text nav">
      <li class="pb20 pt20 spli"><a href="#01">活用実績</a></li>
      <li class="pb20 pt20 spli"><a href="#02">スグ！出来ること</a></li>
      <li class="pb20 pt20 spli"><a href="#03">お客様の声</a></li>
      <li class="pb20 pt20 spli"><a href="#04">サポート体制</a></li>
      <li class="pb20 pt20 pt20"><a href="#" target="_blank"><div class="pl15 pr15"><p class="btn--orange btn-c2" style=""><i class="fas fa-download fa-lg"></i></i>今すぐ無料体験版ダウンロード</p></div></a></li>
    </ul>
    </nav>  
    <!-- ボタン部分 -->
    <div class="nav_btn" id="nav_btn">
      <span class="hamburger_line hamburger_line1"></span>
      <span class="hamburger_line hamburger_line2"></span>
      <span class="hamburger_line hamburger_line3"></span>
    </div>
    <div 

  /* SP menu */
  function toggleNav() {
  var body = document.body;
  var hamburger = document.getElementById('nav_btn');
  var blackBg = document.getElementById('nav_bg');

  hamburger.addEventListener('click', function() {
    body.classList.toggle('nav_open'); //メニュークリックでnav-openというクラスがbodyに付与
  });
  blackBg.addEventListener('click', function() {
    body.classList.remove('nav_open'); //もう一度クリックで解除
  });
  $('#navi a[href="#"]').on('click', function(event) {  
  $('#navi').removeClass('nav_open');
  });
}
toggleNav();
</script>

Answer 1

全く試してないですが、こうではないですか？

//$('#navi').removeClass('nav_open');
$(body).removeClass('nav_open');

Comments

[ankof]

回答ありがとうございます！
書き換えてみたのですが動かず・・。再度調べてみます！

<script>
/* SP menu */
function toggleNav() {
var body = document.body;
var hamburger = document.getElementById('nav_btn');
var blackBg = document.getElementById('nav_bg');

hamburger.addEventListener('click', function() {
body.classList.toggle('nav_open'); //メニュークリックでnav-openというクラスがbodyに付与
});
blackBg.addEventListener('click', function() {
body.classList.remove('nav_open'); //もう一度クリックで解除
});
$('#navi a[href="#"]').on('click', function(event) {
$(body).removeClass('nav_open');
});
}
toggleNav();
</script>

[Lhankor_Mhy]

じゃあ、こうかもしれないですね。

$('#navi a[href^="#"]')

[ankof]

$('.nav a[href]').on('click', function(event) {
$('.nav_btn').trigger('click');
});

こちらを書いてみたら閉じました！！ヒントをくださり、ありがとうございました！！

[ankof]

動いた！と思ったら動いていなかったです・・もう一度試します・・

[ankof]

何度もすみません！いただいたタグで動きました！！！！
ありがとうございました！！！

[Lhankor_Mhy]

それだとページ内リンク以外も閉じると思いますが、それで問題なければそれでもいいと思います。
ご解決されて何よりです