jsハンバーガーメニューがとじません。

Question

スマホのハンバーガーメニューでクリックすると全面ブラックにしてメニューを表示するものをどこからか拾わせていただきました。
jqueryのところもコピペしてきたのですが、メニューを開いてページ内リンクをクリックしてもメニューが閉じません。
いろんな人の解決方法をみて何度もチャレンジしましたが光明がみえず、どなたか通りすがりの方に救っていただけないものかと質問しました。もらってきた元のページもすでにわかりません。

script部分はこちらです

  $(document).ready(function() {
    //ハッシュリンクのアンカータグをクリックするとマッチするidを持つ要素にスクロールする
    $('a[href^="#"]').click(function(event) {

        var id = $(this).attr("href");
        var offset = 60;
        var target = $(id).offset().top - offset;
        $('html, body').animate({scrollTop:target}, 500);
        event.preventDefault();
        return false;
    });
  });

  (function($) {
    $(function () {
        $('#nav-toggle').on('click', function() {
            $('body').toggleClass('open');
        });
    });
  })(jQuery);

この状態で、ページ内リンクへも正しく飛ぶのでしょうか。
バッテンでメニュー消した時も移動した形跡がなくて、よくわかりません、、、

どなたか、宜しくお願い致します。

☆追記です
なんか、かちゃかちゃになっていてすみません！

<div id="wrapper">
　　　<a id="top"></a>
     <div class="menu-sp">
	 <div id="header">
  		<a href="../index.html"><h1>ooooo</h1></a>
    
		<div id="nav-toggle">
			<div>
				<span></span>
				<span></span>
				<span></span>
			</div>
  		</div>

  <div id="gloval-nav">
    <nav>
        <ul>
            <li class="mgB"><a href="#">#</a></li>
            <li class="mgB"><a onClick="#" class="button">#</a></li>
            <li><a href="#">TOP</a></li>
            <li><a href="#aaaa">aaaa</a></li>
            <li><a href="#bbbb">bbbb</a></li>
            <li><a href="#cccc">cccc</a></li>
            <li><a href="#dddd">dddd</a></li>
        </ul>
    </nav>
  </div>
 </div>

css↓

body {
   }


#nav-toggle {
  position: fixed;
  top: 25px;
  right: 25px;
  height: 32px;
  cursor: pointer; }

  #nav-toggle > div {
    position: relative;
    width: 36px; }

  #nav-toggle span {
    width: 100%;
    height: 1px;
    left: 0;
    display: block;
    background: #333;
    position: absolute;
    transition: transform .6s ease-in-out, top .5s ease; }

    #nav-toggle span:nth-child(1) {
      top: 0; }
    #nav-toggle span:nth-child(2) {
      top: 14px; }
    #nav-toggle span:nth-child(3) {
      top: 28px; }
  #nav-toggle:hover span:nth-child(1) {
    top: 4px; }
  #nav-toggle:hover span:nth-child(3) {
    top: 23px; }

.open #nav-toggle span {
  background: #fff; }
  .open #nav-toggle span:nth-child(1) {
    top: 15px;
    transform: rotate(45deg); }
  .open #nav-toggle span:nth-child(2) {
    top: 15px;
    width: 0;
    left: 50%; }
  .open #nav-toggle span:nth-child(3) {
    top: 15px;
    transform: rotate(-45deg); }

/* z-index */
#nav-toggle {
  z-index: 1000; }

#container {
  z-index: 900; }

#gloval-nav {
  background: #000;
  color: #fff;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 990;
  text-align: center;
  display: flex;
  visibility: hidden;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-size: 15px;
  opacity: 0;
  transition: opacity .6s ease, visibility .6s ease; }

#gloval-nav a {
  display: block;
  color: #fff;
  text-decoration: none;
  padding: 10px 0;
  transition: color .6s ease; }

  #gloval-nav a:hover {
    color: #666; }

#gloval-nav ul {
  list-style: none; }

  #gloval-nav ul li {
    opacity: 0;
    transform: translateX(200px);
    transition: transform .6s ease, opacity .2s ease; }
    #gloval-nav ul li:nth-child(2) {
      transition-delay: .15s; }
    #gloval-nav ul li:nth-child(3) {
      transition-delay: .3s; }
    #gloval-nav ul li:nth-child(4) {
      transition-delay: .45s; }
    #gloval-nav ul li:nth-child(5) {
      transition-delay: .6s; }
    #gloval-nav ul li:nth-child(6) {
      transition-delay: .75s; }
    #gloval-nav ul li:nth-child(7) {
      transition-delay: .9s; }

/* open */
.open {
  overflow: hidden; }
  .open #gloval-nav {
    visibility: visible;
    opacity: 1; }
  .open #gloval-nav li {
    opacity: 1;
    transform: translateX(0);
    transition: transform 1s ease, opacity .9s ease; }

#gloval-nav {
  background: #000;
  color: #fff;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 990;
  text-align: center;
  display: flex;
  visibility: hidden;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-size: 18px;
  line-height: 1.8em;
  opacity: 0;
  transition: opacity .6s ease, visibility .6s ease; }

.open #gloval-nav {
  visibility: visible;
  opacity: 1; }

Comments

[m.ts10806]

HTML,CSSもご提示ください。

コードやエラーはマークダウンのcode機能を利用してご提示ください。
https://teratail.com/questions/238564

[hohosyuku]

少々お待ちください！
だいじなところ、伏せてきます！

[m.ts10806]

場合により、現象再現する最小構成のコードを別途組んだ方が良いかもしれません。

[hohosyuku]

すごく、長くなりました！みにくくて申し訳ないです

[m.ts10806]

ですから、コードやエラーはマークダウンのcode機能を利用してご提示ください。
https://teratail.com/questions/238564

[hohosyuku]

申し訳ないです。みにいってきます。

[hohosyuku]

変更してきました、面目ないです。

[m.ts10806]

謝る必要はないですよ。淡々といきましょう。

[hohosyuku]

教えてくれてありがとうございました

Answer 1

下記でどうでしょうか。

$(document).ready(function () {
    //ハッシュリンクのアンカータグをクリックするとマッチするidを持つ要素にスクロールする
    $('a[href^="#"]').click(function (event) {
        $('body').removeClass('open'); //挿入
        var id = $(this).attr("href");
        var offset = 60;
        var target = $(id).offset().top - offset;
        $('html, body').animate({ scrollTop: target }, 500);
        event.preventDefault();
        return false;
    });
});

Codepenサンプル

解説

メニューの表示は body のClass に open の付加/削除でしています。
メニューをクリック時に openクラスを削除すれば非表示になります。
表示/非表示時のアニメーションはCSSのtransitionを使っています。

Comments

[hohosyuku]

やってみましたら、バーガーが開かなくなりました。htmlとcssついかしました。また、もしよければお願いいたします(>_<)すみません、ありがとうございます！

[hatena19]

サンプル作成してみましたが、正常に動作しています。
回答にサンプルリンク追加しましたので、ご確認ください。

[hohosyuku]

本当ですか！すでに入っているコードなどなどが邪魔しているのかもしれません。お手数おかけしました！
ありがとうございます！

[hatena19]

ひょっとして、後半の関数を削除していませんか。
//追加 の行のコードを追加するだけですよ。
他の部分はいじらないでください。

[hohosyuku]

すみません、ちょっと質問させてください(:_;)
何度か試してみましたが、他のページへの移行の場合は閉じるのですが、ページ内リンクの場合は閉じないのですが、何か違いはあるのでしょうか？？

[hohosyuku]

そのまま、まるっとコピーして入れ替えてみています。

[hohosyuku]

サンプルの動きが素晴らしくて泣けてきますね！

[hatena19]

$('body').removeClass('open'); //挿入

元のコードに上記の１行を追加するだけで動作するはずです。

[hohosyuku]

何かが邪魔をしているのかもしれません。そのまま全部のスクリプトを張り付けていますが、どうも動かないです。それでもしっかり動いているサンプルに勇気づけられます！多分、いらないものを消したりすると動きだすのではないかと思います。教えてくださりありがとうございました！

[hohosyuku]

いま、動いてくれました！！！すごく、幸せです。ありがとうございます！！