ハンバーガーメニューが片ページ開かない

２つのHTMLページのどちらにも共通のハンバーガーメニューを付けたいのですが
１つ目のindex.htmlは問題なく作動もするのですが2つ目のmenu.htmlページになると
表示には問題ないのですがハンバーガーが開きません。
全く同じHTMLをindex.htmlとmenu.htmlに記入しています。
cssは長かったので割愛していますが必要であれば載せます。
jsも色々いじってみたのですがうまくいかず。。。

どなたか原因わかる方いらっしゃいましたらアドバイスお願い致します。
よろしくお願いします。

html
1（index.html）
2<header id="top-head">
3    <div class="inner">
4      <a href="index.html"><img src="images/logo.svg" class="logopic" alt="logo"></a>
5      <div id="nav_toggle">
6        <div>
7          <span></span>
8          <span></span>
9          <span></span>
10        </div>
11      </div>
12      <nav>
13        <ul>
14          <li class="menu"><a href="index.html">TOP</a></li>
15          <li class="menu"><a href="index.html#news">NEWS</a></li>
16          <li class="menu"><a href="index.html#about">ABOUT</a></li>
17          <li class="menu"><a href="menu.html">MENU</a></li>
18          <li class="menu"><a href="index.html#access">ACCESS</a></li>
19          <li>
20            <div class="sns1">
21              <a href=""><img src="images/instagram.svg" class="instagram" alt="instagram"></a>
22              <a href=""><img src="images/twitter.svg" class="twitter" alt="twitter"></a>
23              <a href=""><img src="images/facebook.svg" class="facebook" alt="facebook"></a>
24            </div>
25          </li>
26        </ul>
27      </nav>
28    </div>
29  </header>

html
1(menu.html)
2<header id="top-head">
3    <div class="inner">
4      <a href="index.html"><img src="images/logo.svg" class="logopic" alt="logo"></a>
5      <div id="nav_toggle">
6        <div>
7          <span></span>
8          <span></span>
9          <span></span>
10        </div>
11      </div>
12      <nav>
13        <ul>
14          <li class="menu"><a href="index.html">TOP</a></li>
15          <li class="menu"><a href="index.html#news">NEWS</a></li>
16          <li class="menu"><a href="index.html#about">ABOUT</a></li>
17          <li class="menu"><a href="menu.html">MENU</a></li>
18          <li class="menu"><a href="index.html#access">ACCESS</a></li>
19          <li>
20            <div class="sns1">
21              <a href=""><img src="images/instagram.svg" class="instagram" alt="instagram"></a>
22              <a href=""><img src="images/twitter.svg" class="twitter" alt="twitter"></a>
23              <a href=""><img src="images/facebook.svg" class="facebook" alt="facebook"></a>
24            </div>
25          </li>
26        </ul>
27      </nav>
28    </div>
29  </header>

css
1@media screen and (max-width: 770px) {
2  #top-head {
3    height: 50px;
4  }
5  .logopic {
6    height: 80%;
7    width: 80%;
8  }
9
10  /*hamburger menu style*/
11  #nav_toggle {
12    background: #fdfdfd00;
13    display: block;
14    width: 22px;
15    height: 22px;
16    position: relative;
17    top: 0px;
18    z-index: 1000;
19  }
20  #nav_toggle div {
21    position: relative;
22  }
23  /*hamburger menu close style*/
24  #nav_toggle span {
25    display: block;
26    height: 1px;
27    background: #262626;
28    position: absolute;
29    width: 100%;
30    left: 0;
31    z-index: 900;
32    -webkit-transition: 0.5s ease-in-out;
33    -moz-transition: 0.5s ease-in-out;
34    transition: 0.5s ease-in-out;
35  }
36  #nav_toggle span:nth-child(1) {
37    top: 0px;
38  }
39  #nav_toggle span:nth-child(2) {
40    top: 10px;
41  }
42  #nav_toggle span:nth-child(3) {
43    top: 20px;
44  }
45  /*hamburger menu open style*/
46  .open #nav_toggle span:nth-child(1) {
47    top: 10px;
48    -webkit-transform: rotate(135deg);
49    -moz-transform: rotate(135deg);
50    transform: rotate(135deg);
51  }
52  .open #nav_toggle span:nth-child(2) {
53    width: 0;
54    left: 50%;
55  }
56  .open #nav_toggle span:nth-child(3) {
57    top: 10px;
58    -webkit-transform: rotate(-135deg);
59    -moz-transform: rotate(-135deg);
60    transform: rotate(-135deg);
61  }
62  /*nav style*/
63  #top-head nav {
64    display: none;
65    position: absolute;
66    top: 0;
67    right: 0;
68    width: 100%;
69    height: 100vh;
70    background: #f8f8f8dd;
71    z-index: 800;
72  }
73  #top-head nav ul {
74    display: block;
75    width: 100%;
76  }
77  #top-head nav ul li {
78    text-align: center;
79    border-bottom: 1px solid #dcdcdc;
80  }
81  #top-head nav ul li:last-child {
82    border: none;
83  }
84  /*nav link style*/
85  #top-head nav ul li a {
86    display: block;
87    color: #262626;
88    padding: 28px; /*列の高さ*/
89  }
90
91  .sns1 {
92    display: flex;
93    justify-content: center;
94  }
95  .menu a::after {
96    content: none;
97  }
98  .menu a:hover::after {
99    content: none;
100  }
101}

js
1  $('#nav_toggle').click(function(){
2    $("#top-head").toggleClass('open');
3    $("nav").slideToggle(500);
4  });
5  //menu link click
6  $('nav a').click(function(){
7    if(window.innerWidth <= 680){
8      $("#top-head").toggleClass('open');
9      $("nav").slideToggle(500);
10    }
11  });
12});

Lhankor_Mhy

2021/04/09 06:42

なんとなくですが、ご提示のコードに原因はないような気がしています。

mikan23

2021/04/09 07:46

ご覧いただきありがとうございます。そうですか、一応cssも載せます。もし何かわかりましたらどうぞよろしくお願いします。

Lhankor_Mhy

2021/04/09 07:55

同じコードからは同じ結果が生まれるので、2つのページの差異をご提示いただいた方がいいと思います。

mikan23

2021/04/10 01:43

ハンバーガーメニューの開く部分がnav_taggleだと思うのですがここのリンク先がindex.htmlにしか効いていないのでしょうか？一応css二つとも載せました。

Lhankor_Mhy

2021/04/10 01:47

CSSではないものが載っているようです。

Lhankor_Mhy

2021/04/10 01:50

問題の再現方法なのですが、 ① index.htmlを開く ② #nav_toggleをクリックする→メニューが開く ③ メニューをクリックし、menu.htmlに移動する ④ #nav_toggleをクリックする→メニューが開かないという感じですか？ --- そのとおりである場合、③で移動するのではなくてmenu.htmlを直接開くとどうなるでしょうか？

mikan23

2021/04/10 01:55

大変失礼しました。 html２つとcssとjs記載しました。＞① index.htmlを開く ② #nav_toggleをクリックする→メニューが開く ③ メニューをクリックし、menu.htmlに移動する ④ #nav_toggleをクリックする→メニューが開かないおっしゃる通りです。移動ルートもですが、menu.html直接開いても反応しない状態です。

Lhankor_Mhy

2021/04/10 01:56

なるほど。あと考えられそうな原因は、ご提示いただいていない部分のタグが#nav_toggleの上に乗っているのでクリックできない、とか……？いずれにせよ、同じコードからは同じ結果しか生まれないので、少なくとも違いがある部分をご提示いただかないと解決しないと思います。

mikan23

2021/04/10 02:07

そうですよね。どのあたりが原因なのかが見当がつかないのですが原因があるとすればHTMLかjsでしょうか？

Lhankor_Mhy

2021/04/10 02:13

たとえば、 menu.html のフッターを削除して#nav_toggleがクリックできない問題が再現するか試す。問題が再現するするなら、フッターは原因ではない。問題が再現しなくなったなら、フッターに原因がある。みたいな感じで、原因がある場所を絞り込んでいくといいと思いますよ。（複数の要因が絡み合っていると単純にはいかないですが）

mikan23

2021/04/10 02:19

headerでしょうか？わかりました。もう少しいじってみます。ご親切にどうもありがとうございました。

Lhankor_Mhy

2021/04/10 02:24

いえ、おそらくheaderに原因はないのではないかな、と思っています。フッターを挙げたのは例えばの話です。

Lhankor_Mhy

2021/04/10 02:26

蛇足ですが、要素を削除することを試すには実際のコードをいじるのではなくて、デベロッパーツールで要素を選び、そこでデリートキーを押すのが楽です。

mikan23

2021/04/10 07:37

>デベロッパーツールで要素を選び、そこでデリートキーを押すのが楽です。ありがとうございます。試してみます。

行動規範の内容に同意します

回答1件

ベストアンサー

私が記載されいてるコードをコピペして、Chromeで試してみたところ、12行目の閉じカッコの所にsyntax errorが出ていましたので、以下のように、

jQUery
1
2if(window.innerWidth <= 680){
3      $("#top-head").toggleClass('open');
4      $("nav").slideToggle(500);
5    };

if文の閉じカッコの次にセミコロンを入れたら正常に作動しましたので、やってみてください。

投稿2021/04/11 03:49

編集2021/04/11 06:45

mari.rinn

総合スコア296

mikan23

2021/04/12 03:49 編集

コメントありがとうございます。ご丁寧にありがとうございます。早速試してみたのですがこちらでは変わりませんでした。ということは記載していないコードが邪魔している可能性があるということですよね？もう少し他の部分みてみます。ちなみにもしお分かりであればハンバーガーメニューの部分をクリックしたらメニューが出てくるリンク先は下記のどの部分になるのでしょうか？余計なことをお伺いして申し訳ないですが可能であればお願いします。 //hamburger menu click $('#nav_toggle').click(function(){ $("#top-head").toggleClass('open'); $("nav").slideToggle(500); });

mari.rinn

2021/04/12 06:44 編集

ブラウザのキャッシュが残っているからではないでしょうか？キャッシュをクリアしてみてください。＞メニューが出てくるリンク先は下記のどの部分になるのでしょうか？ちょっとご質問の意味（メニューが出てくるリンク先とは？）がよくわからないので、コードの意味をとりあえず書いておきますね。 $('#nav_toggle').click(function() もしid名nav_toggleの要素がクリックされたら { $("#top-head").toggleClass('open'); id名top-headという要素にopenという名前のクラスを付与し、これはきっかけの度に付与と剥奪が切り替わる $("nav").slideToggle(500); そして、navという要素が0.5秒かけて降りてくる。これはきっかけの度に降りる、上がるが切り替わる }); です。ちなみにですが、質問文に記載されてるjQueryのコードの一番上に $(function(){ というのが来ないといけないのですが、これが抜けてますが、これはここに転載される時にコピーし忘れたということですよね？

mikan23

2021/04/12 09:04

ご丁寧にありがとうございます。キャッシュをクリアにし他ところできました！ありがとうございます。＞$(function(){ こちらはこのサイトに貼り忘れです。失礼しました。

行動規範の内容に同意します