スムーススクロールとハンバーガーメニュー内リンクをクリックで閉じる

前提・実現したいこと

ハンバーガーメニューを設置しており、一部ページ内リンクとスムーススクロールを設定しています。
ハンバーガーメニュー内のリンクをクリックするとハンバーガーメニューが閉じるようにしたいと考えています。

しかしスクロールされず、ハンバーガーメニューも閉じずに開いたままです。

該当のソースコード

html
1<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>//jQueryのバージョン
2
3<div class="hamburger">
4            <div class="Toggle">
5                <span></span>
6                <span></span>
7                <span></span>
8            </div>
9        </div>
10    </div>
11
12    <nav class="NavMenu">
13        <ul class="hummanu">
14            <li><a href="#work">Works</a></li>
15            <li><a href="#about">About</a></li>
16            <li><a href="#contact">Contact</a></li>
17        </ul>
18    </nav>
19
20<div class="work">//各スクロールしたい階層
21<div class="about">
22<div class="contact">
23
24

CSS
1.Toggle {
2    /* display: inline-block; */
3    position: relative;
4    /* right: 13px; */
5    /* top: 12px; */
6    width: 40px;
7    height: 40px;
8    cursor: pointer;
9    z-index: 3;
10    /* text-align: right; */
11}
12
13.Toggle span {
14    display: block;
15    position: absolute;
16    width: 30px;
17    border-bottom: solid 5px #ff8c00;
18    -webkit-transition: .35s ease-in-out; /*変化の速度を指定*/
19    -moz-transition: .35s ease-in-out; /*変化の速度を指定*/
20    transition: .35s ease-in-out; /*変化の速度を指定*/
21    left: 6px;
22}
23
24.Toggle span:nth-child(1) {
25    top: 9px;
26}
27
28.Toggle span:nth-child(2) {
29    top: 18px;
30}
31
32.Toggle span:nth-child(3) {
33    top: 27px;
34}
35
36
37.Toggle.active span:nth-child(1) {
38    top: 18px;
39    left: 6px;
40    -webkit-transform: rotate(-45deg);
41    -moz-transform: rotate(-45deg);
42    transform: rotate(-45deg);
43}
44
45
46.Toggle.active span:nth-child(2),
47.Toggle.active span:nth-child(3) {
48    top: 18px;
49    -webkit-transform: rotate(45deg);
50    -moz-transform: rotate(45deg);
51    transform: rotate(45deg);
52}
53//scroll.css
54
55
56nav.NavMenu {
57    position: fixed; /*表示位置を固定*/
58    z-index: 2; /*重ね順を変更*/
59    top: 0; /*表示位置を指定*/
60    left: 0; /*表示位置を指定*/
61    background: transparent; /*背景を透明にする*/
62    color: #000; /*文字色を白にする*/
63    text-align: center; /*テキストを中央揃え*/
64    width: 100%; /*全幅表示*/
65    transform: translateY(-100%); /*ナビを上に隠す*/
66    transition: all 0.6s; /*アニメーションの時間を指定*/
67
68
69}
70
71.open.NavMenu {
72    top: 60px;
73
74}
75
76nav.NavMenu ul {
77    background: #ccc; /*背景をグレーにする*/
78    width: 100%;
79    margin: 0 auto;
80    padding: 0;
81    height: 100vh;
82    display: flex;
83    flex-direction: column;
84    background-color: rgba(0, 0, 0, 0.9);
85
86}
87
88nav.NavMenu ul li {
89    font-size: 1.1em;
90    list-style-type: none;
91    padding: 0;
92    width: 100%;
93
94}
95
96nav.NavMenu ul li:last-child {
97    padding-bottom: 0;
98    border-bottom: none; /*最後のメニュー項目のみ下線を消す*/
99}
100
101nav.NavMenu ul li a {
102    display: block; /*クリックできる領域を広げる*/
103    color: #ffffff;
104    padding: 1em 0;
105    text-decoration: none;
106}
107
108nav.NavMenu.active {
109    transform: translateY(0%);
110}
111//Hamburger.css

javascript
1//hambuger.js
2
3$(function () {
4    $('.Toggle').click(function () {
5        $('header').toggleClass('open');
6        $(this).toggleClass('active');
7        if ($(this).hasClass('active')) {
8            $('.NavMenu').addClass('active');　 //クラスを付与
9        } else {
10            $('.NavMenu').removeClass('active'); //クラスを外す
11        }
12    });
13});
14
15

javascript
1
2//scroll.js
3
4$(function () {
5    $('a[href^=#]').click(function() {
6        var speed = 400;
7        var href= $(this).attr("href");
8        var target = $(href == "#" || href == "" ? 'html' : href);
9        var position = target.offset().top;
10        $('body,html').animate({scrollTop:position}, speed, 'swing');
11        $('.NavMenu').removeClass('open');
12        $('.NavMenu').removeClass('active');
13        $(".Toggle").removeClass('active');
14        return false;
15    });
16});

ここにより詳細な情報を記載してください。
色んな記事を見て試しましたが、全く動かず消えずでした。
JS初心者のため,すみませんがよろしくお願いします。

iss

2019/11/28 04:34 編集

開始DIVに抜けがあるようなので補完してください。

kasidai

2019/11/28 04:39

修正しました！ありがとうございます。

iss

2019/11/28 04:45

jQueryのバージョンによって書き方がかわるのでバージョンを補足記載いただけますか？

kasidai

2019/11/28 04:52

iss

2019/11/28 04:59

1.3.2ですね了解です。本文にも記載すると他の方も参考になるので正確な回答がつきやすくなると思います。

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

回答1件

ベストアンサー

追記修正版

< 小出しされた情報で無効になった修正もあり見辛くなっていたので整理して書き直しました。 >

アンカーの問題

アンカーリンクはclassではなくIDで指定する必要があります。

HTML
1<div id="work">各スクロールしたい階層</div>
2<div id="about">各スクロールしたい階層</div>
3<div id="contact">各スクロールしたい階層</div>

ハンバーガーメニューが閉じれない問題

閉じる時のクリック判定が、開く時の判定の中にあるため動作していません。

~~$('#nav a').on('click', function() {~~
~~ $('#nav').toggleClass('active');~~
~~ $(".Toggle").toggleClass('active');~~
})

の部分は全部カットして、Classの付加処理は
$('a[href^=#]').click(function() { の中に移動しましょう。

また、メニュークリックでは必ずハンバーガーが閉じるのでtoggleClassではなくremoveClassにしたほうが後々の処理干渉がなくなるのでおすすめ。

あとCSSから察するに、open の class は header ではなくnav.NavMenu に付く事で動作しているようなので、
$('header').removeClass('open'); の指定箇所は
$('.NavMenu').removeClass('open'); にしました。

JavaScript
1  $('a[href^=#]').click(function() {
2    var speed = 400;
3    var href= $(this).attr("href");
4    var target = $(href == "#" || href == "" ? 'html' : href);
5    var position = target.offset().top;
6    $('body,html').animate({scrollTop:position}, speed, 'swing');
7    $('.NavMenu').removeClass('open');
8    $('.NavMenu').removeClass('active');
9    $(".Toggle").removeClass('active');
10    return false;
11  });

検証したコード

参考に検証したコードをはっておきます。

HTML
1<!DOCTYPE html>
2<!DOCTYPE html>
3<html lang="ja">
4<head>
5  <meta charset="UTF-8">
6  <meta name="viewport" content="width=device-width, initial-scale=1.0">
7  <meta http-equiv="X-UA-Compatible" content="ie=edge">
8  <title>Document</title>
9  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
10  <style>
11  </style>
12</head>
13<body>
14
15<div class="hamburger">
16  <div class="Toggle">
17    <span></span>
18    <span></span>
19    <span></span>
20  </div>
21</div>
22<nav class="NavMenu">
23  <ul class="hummanu">
24    <li><a href="#work">Works</a></li>
25    <li><a href="#about">About</a></li>
26    <li><a href="#contact">Contact</a></li>
27  </ul>
28</nav>
29
30<div id="work" style="margin:50px 0 100vh 0;">#work 各スクロールしたい階層</div>
31<div id="about" style="margin-bottom:100vh;">#about 各スクロールしたい階層<br><a href="#">▲先頭に戻る</a></div>
32<div id="contact" style="margin-bottom:100vh;">#contact 各スクロールしたい階層<br><a href="#">▲先頭に戻る</a></div>
33
34</body>
35</html>

JavaScript
1$(function () {
2  $('.Toggle').click(function () {
3    $('.NavMenu').toggleClass('open');
4    $(this).toggleClass('active');
5    if ($(this).hasClass('active')) {
6      $('.NavMenu').addClass('active');　 //クラスを付与
7    } else {
8      $('.NavMenu').removeClass('active'); //クラスを外す
9    }
10  });
11  $('a[href^=#]').click(function() {
12    var speed = 400;
13    var href= $(this).attr("href");
14    var target = $(href == "#" || href == "" ? 'html' : href);
15    var position = target.offset().top;
16    $('body,html').animate({scrollTop:position}, speed, 'swing');
17    $('.NavMenu').removeClass('open');
18    $('.NavMenu').removeClass('active');
19    $(".Toggle").removeClass('active');
20    return false;
21  });
22});

CodePen 検証

https://codepen.io/isscode/pen/pooMBJL

投稿2019/11/28 04:35

編集2019/11/29 01:33

iss

総合スコア506

kasidai

2019/11/28 04:40

修正しました！そこはただこのページで追加しただけなので実際のコードには書かれておりません。ご指摘ありがとうございます。

iss

2019/11/28 04:41

修正対応ありがとうございます。他の原因を検証してみます

kasidai

2019/11/28 06:50

スクロールの方はIDの件で動作するようになりました！ハンバーガーのリンクを押したとき閉じる動作はscroll処理の方に3通り追記してみましたが、まだ変わらないようです（追記した箇所が良くないのかもしれません）。ハンバーガーのCSSを追記してみたので確認お願いします。

iss

2019/11/28 06:55

CSS追記確認しました。表示非表示に作用している[.active]や [.open]のスタイルも欲しいです。

iss

2019/11/28 07:04 編集

見逃してましたが、 $('#nav a').on('click', function() { $('#nav').toggleClass('active'); が間違ってそうです。［#］ではなく $('nav') または $('nav.NavMenu') または $('.NavMenu') ではないでしょうか。 ▼セレクタの付け方例： <header>は$('header') <header id="hoge">は$('#hoge') または $('header#hoge') <header class="hoge">は$('.hoge') または $('header.hoge')

iss

2019/11/28 07:14

すいません、小出しで修正をしていたら本質を見失っていました。追記でちゃんと回答します。

kasidai

2019/11/28 22:36

返信遅れてすみません！今のところまだ動作しないようです。表示非表示に作用している[.active]や [.open]のスタイル（//Hamburger）を追加しました。よろしくお願いします！

iss

2019/11/29 01:22

CSS追記ありがとうございます。ようやく全容が見えました。スタイル指定に合わせて細かなコードを調整しました。 CodePen上では動作しているのでコードを見比べてみてください。 https://codepen.io/isscode/pen/pooMBJL

kasidai

2019/11/29 02:17 編集

Codepenの動きが理想の動きです！しかしHamburgerとscrollのJsをまとめて書くとCodepenのようにメニューを押したとき上に背景の黒い部分に隙間ができてしまいますが、Jsファイルを分割してあると直るようです。また、自分のエディタで動かしたところメニューボタンをクリックしたところ、開かなくなりました。 $('.NavMenu').toggleClass('open');のところを ('header').toggleClass('open');に戻すと開くようにはなるようです。また、Jsのファイルは実際分けてあるので該当のソースコードもJsファイルを分割しました。何度も修正すみません。

iss

2019/11/29 02:29

提示されたコードに<header> や header.open のスタイルが無く、 .open.NavMenu のみが提示されたので $('header')が間違いだろうと$('.NavMenu')に変更したのです。ここまで解説した内容やサンプルコードを理解していれば自身で治せると思うのですが無理そうですか？

kasidai

2019/11/29 09:59 編集

色々と自分なりに試してみましたがどうも閉じる動きだけできませんね... もう少し考えてみます。ありがとうございました！

kasidai

2019/12/02 07:10

$('a[href^=#]')と言われていたところを、$('a[href^="#"]')にしたところ無事動作しました。ありがとうございました。

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