ハンバーガーメニューのページ内アンカーリンク時に自動でとじるにはどうしたら良いですか？

Question

ハンバーガーメニューのページ内アンカーリンク時に自動でとじるにはどうしたら良いですか？

リンクを押すと飛ぶのですが、メニューが開きっぱなしになってしまうので
リンクを押した時に閉じるようにしたいです。

こちらをそっくりそのまま使っています。
http://stooorm.com/memo/2019/06/28/post-151/

色々試したのですがわかりません…。
ご教授願います。

Comments

[kei344]

まだ質問が「受付中」になっていますが、「ベストアンサー」を選び「解決済」にされてはいかがでしょうか。

Answer 1

jQuery使っていいなら、参考先に閉じる時のコードがあるから、丸々移植して

(function ($) {


  /* ------------------------------- */

})(jQuery);


  /* 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'); //もう一度クリックで解除
  });
  $('a').on('click', function(){
    body.classList.remove('nav_open');
  });
}
toggleNav();

こんな感じかな？

Comments

[kyoya0819]

修正しました

[dewf5]

ありがとうございます！閉じるようになりました！

こんなに早くご回答をいただけると思っていなかったので感激です！
とても助かりました！ありがとうございます！

Answer 2

jQuery使っていいなら、下記の3行でOK。

  /* SP menu */
  $("#nav_btn, #nav_bg, #navi a").on("click", function(){ 
      $("body").toggleClass("nav_open");
  });

Codepen動作サンプル