ハンバーガーメニューが、同一ページ内のリンクでmenuの <li><a href=""></a> に#をつけると閉じなくなってしまう。

Question

前提・実現したいこと

ハンバーガーメニューが自動で閉じない、同一ページ内のリンクでmenuの <li><a href=""></a> に#をつけると閉じなくなってしまう。

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

スマホ用の1ページのサイト用のハンバーガーメニューを作りたいのですが、
メニューをクリックした後、同一ページのためメニューが開きっぱなしになり、これをメニュークリックと同時に閉じるようにしたいのですが、苦戦しています。

様々に紹介されているcss、jQueryをいろいろ実装してみるのですが、
そのままコピペした時（<li><a href="">top</a></li>）はうまく動くのですが、実際にページ内のリンクを

<li><a href="#top">top</a></li> のように具体的に#アンカー名 を入れるとその場所には飛ぶのですが、メニューが開いたままで閉じなくなってしまいます。

参考にしたサイト

https://www.aiship.jp/knowhow/archives/31639
https://tech-dig.jp/hamburger-global-nav/

実際の制作サイト

http://isuzukoryu.net/

実際に制作しているサイト

<script>
$(function(){
	$(".btn-gnavi").on("click", function(){
		// ハンバーガーメニューの位置を設定するための変数
		var rightVal = 0;
		if($(this).hasClass("active")) {
			// 「open」クラスを持つ要素はメニューを開いた状態に設定
			rightVal = -300;
			// メニューを開いたら次回クリック時は閉じた状態になるよう設定
			$(this).removeClass("active");
		} else {
			// 「open」クラスを持たない要素はメニューを閉じた状態に設定 (rightVal は0の状態 )
			// メニューを開いたら次回クリック時は閉じた状態になるよう設定
			$(this).addClass("open");
		}

		$("#global-navi").stop().animate({
			right: rightVal
		}, 200);
	});
});
</script>

<div id="wrapper">

	<!--menu-->
<p class="btn-gnavi">
		<span></span>
		<span></span>
		<span></span>
</p> 
 
<nav id="global-navi">
<ul class="menu">     
  <li><a href="#top">top</a></li>
  <li><a href="#topics">お知らせ</a></li>
  <li><a href="#lesson">教室案内</a></li>
  <li><a href="#about">五十鈴古流のご紹介</a></li>
  <li><a href="#portfolio">作品</a></li>
  <li><a href="#book">写真集</a></li>
  <li><a href="#contact">お問い合わせ</a></li>
</ul>
</nav> 
</div>

#global-navi {min-height:35px;/* */
    background-color:#DB8E71;/*rgba(0,0,0,0.3) */
    position: fixed;
    top: 0;
    right: 0px;
    width: 100%;
    z-index: 2;margin:auto;}
#wrapper nav ul li{
    display:inline-block;
    font-size: 16px;
    padding:10px;
}
#wrapper nav ul li a{color:#fff;text-decoration: none;}
#wrapper a:hover{color:#b22222;}
#wrapper nav ul{  font-size: 0;text-align: center; }


@media screen and (max-width: 980px) {
#wrapper nav {
    position: fixed;
    top: 0;
    right: -300px;
    width: 300px;
    height: 100%;
    padding-top: 50px;
    background:#333;
    font-size: 16px;
    box-sizing: border-box;
    z-index: 2
}
#wrapper nav ul li {
    display:block;
    padding: 20px 28px
}
 
#wrapper nav ul li a  {
    text-decoration: none;
    color: #ddd
}
 
#wrapper .btn-gnavi {
    position: fixed;
    top: 20px;
    right: 20px;
    width: 30px;
    height: 24px;
    z-index: 3;
    box-sizing: border-box;
    cursor: pointer;
    -webkit-transition: all 400ms;
    transition: all 400ms
}
 
#wrapper .btn-gnavi span {
    position: absolute;
    width: 30px;
    height: 4px;
    background: #666;
    border-radius: 10px;
    -webkit-transition: all 400ms;
    transition: all 400ms
}
 
#wrapper .btn-gnavi span:nth-child(1) {
    top: 0
}
 
#wrapper .btn-gnavi span:nth-child(2) {
    top: 10px
}
 
#wrapper .btn-gnavi span:nth-child(3) {
    top: 20px
}
 
#wrapper .btn-gnavi.open {
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg)
}
/*三本線の色 */ 
#wrapper .btn-gnavi.open span {
    background-color: #ddd 
}

#wrapper .btn-gnavi.open span {
    width: 24px;
}
#wrapper .contents section p {
    position: absolute;
    top: 50%;
    width: 30%;
    line-height: 1.4;
    font-size: 20px;
    color: #fff;
    text-shadow: 0 0 6px #666
}
 
#wrapper .contents section:nth-child(odd) p {
    left: 10%
}
 
#wrapper .contents section:nth-child(even) p {
    right: 10%
}
}

どうか お力をお貸しください（何度も見直していますが初心者ですので、なにかしら基本的なミスがあるかもしれません。）よろしくお願い致します。

Answer 1

JavaScriptを以下のように修正したら動作すると思うのですが、どうでしょうか？
activeクラスとopenクラス両方使っているのが複雑に思えるので、activeクラスはCSSでも利用していなかったのて、openクラスだけで実装してみました。

$(function() {
  $(".btn-gnavi").on("click", function() {
    // ハンバーガーメニューの位置を設定するための変数
    var rightVal = 0;
    if ($(this).hasClass("open")) {
      // 「open」クラスを持つ要素はメニューを開いた状態に設定
      rightVal = -300;
      // メニューを開いたら次回クリック時は閉じた状態になるよう設定
      $(this).removeClass("open");
    } else {
      // 「open」クラスを持たない要素はメニューを閉じた状態に設定 (rightVal は0の状態 )
      // メニューを開いたら次回クリック時は閉じた状態になるよう設定
      $(this).addClass("open");
    }

    $("#global-navi")
      .stop()
      .animate(
        {
          right: rightVal
        },
        200
      );
  });
});

動くサンプルコードを書きましたので、よろしければ動作確認などしてみてください。
サンプルコード: CodePen

Comments

[Naka-chan]

ご丁寧にありがとうございます。やってみたのですが、やはりメニューが開いたままアンカーへ着地し、三本線をクリックしないとメニューが閉じません。
CodePenで作っていただいたサイトも何度も確認しましたがやはりメニューが閉じません。ブラウザーもスマホのChrome、PCのChromeとFOXと試してみましたが結果は変わらずでした。なかなか難しいです。。。

[shgtkshruch]

コメントありがとうございます。
なるほど、私が思い違いをしていたかもしれません。
期待している動作は、三本線をクリックしたらメニューが開いて、メニューのリンクをクリックしたらメニューが閉じる、ということでしょうか？
そうであれば、CodePenのサンプルコードを修正しましたので、ご確認いただけますか？

[Naka-chan]

これです！まさにこれです！！（涙）ご回答ありがとうございます。もう十数時間もかかりっきりでしたが、これですっきりしました！本当にお礼申し上げます！

[shgtkshruch]

解決できてよかったです！
サイト制作頑張ってください。
質問が解決できたと思いますので、解決済みにしておいていただければとおもいます。