ページ内リンクのスクロール時にハンバーガーメニューを閉じたい。

前提・実現したいこと

ハンバーガーメニューのリンクからページ内リンク、スムーズスクロールを設定しています。ハンバーガーメニュー内のリンクをクリックし、移動すると同時にハンバーガーメニューを閉じたいと考えています。

ハンバーガーメニューのHTML、CSS、JavaScriptは一部ネットからのコピペがあります。他にも調べたのですが閉じるための記述が現状分かりません。

おそらく、<li class="nav-item">の中のaタグをクリックした時にJavaScriptで付与した.nav-openのクラスを削除するという動きだとは思うのですが、どのように記述すればいいか教えていただきたいです。

該当のソースコード

HTML
1<nav class="nav">
2　　<ul class="nav-list">
3　　　　<li class="nav-item"><a href="#campaign">campaign<span class="jp">キャンペーン</span></a></li>
4　　　　<li class="nav-item"><a href="#point">point<span class="jp">店舗の強み</span></a></li>
5　　　　<li class="nav-item"><a href="#facility">facility<span class="jp">施設紹介</span></a></li>
6　　　　<li class="nav-item"><a href="#price">price<span class="jp">料金案内</span></a></li>
7　　　　<li class="nav-item"><a href="#faq">faq<span class="jp">よくあるご質問</span></a></li>
8　　　　<li class="nav-item"><a href="#access">access<span class="jp">アクセス</span></a></li>
9　　</ul>
10
11　　<ul class="btn-list">
12　　　　<li class="btn-item"><a href="">WEB入会はこちら</a></li>
13　　　　<li class="btn-item"><a href="">見学・体験予約はこちら</a></li>
14　　　　<li class="btn-item"><a href="">お問い合わせ</a></li>
15　　</ul>
16</nav>
17			
18<div class="hamburger" id="js-hamburger">
19　　<span class="hamburger__line hamburger__line--1"></span>
20　　<span class="hamburger__line hamburger__line--2"></span>
21　　<span class="hamburger__line hamburger__line--3"></span>
22</div>
23<div class="black-bg" id="js-black-bg"></div>
24

CSS
1.nav {
2  position: fixed;
3  right: -320px;
4  top: 0;
5  width: 300px; 
6  height: 100vh;
7  padding-top: 40px;
8  background-color: #fff;
9  transition: all .6s;
10  z-index: 200;
11  overflow-y: auto; 
12}
13.hamburger {
14  position: absolute;
15  right: 0;
16  top: 0;
17  width: 40px; 
18  height: 40px; 
19  cursor: pointer;
20  z-index: 300;
21}
22.nav-list {
23  margin: 0;
24  padding: 0;
25  list-style: none;
26}
27.nav-item {
28  text-align: center;
29  padding: 0 14px;
30}
31.nav-item a {
32  display: block;
33  padding: 8px 0;
34  border-bottom: 1px solid #eee;
35  text-decoration: none;
36  color: #111;
37}
38.nav-item a:hover {
39  background-color: #eee;
40}
41.hamburger__line {
42  position: absolute;
43  left: 11px;
44  width: 18px;
45  height: 1px;
46  background-color: #111;
47  transition: all .6s;
48}
49.hamburger__line--1 {
50  top: 14px;
51}
52.hamburger__line--2 {
53  top: 20px;
54}
55.hamburger__line--3 {
56  top: 26px;
57}
58.black-bg {
59  position: fixed;
60  left: 0;
61  top: 0;
62  width: 100vw;
63  height: 100vh;
64  z-index: 100;
65  background-color: #000;
66  opacity: 0;
67  visibility: hidden;
68  transition: all .6s;
69  cursor: pointer;
70}
71
72
73.nav-open .global-nav {
74  right: 0;
75}
76.nav-open .black-bg {
77  opacity: .8;
78  visibility: visible;
79}
80.nav-open .hamburger__line--1 {
81  transform: rotate(45deg);
82  top: 20px;
83}
84.nav-open .hamburger__line--2 {
85  width: 0;
86  left: 50%;
87}
88.nav-open .hamburger__line--3 {
89  transform: rotate(-45deg);
90  top: 20px;
91}
92
93/*ページ内リンク位置調整（ヘッダーの高さ分）*/
94.anchor{
95    display: block;
96    padding-top: 60px;
97    margin-top: -60px;
98}
99

JavaScript
1//ハンバーガーメニュー
2function toggleNav() {
3  var body = document.body;
4  var hamburger = document.getElementById('js-hamburger');
5  var blackBg = document.getElementById('js-black-bg');
6
7  hamburger.addEventListener('click', function() {
8    body.classList.toggle('nav-open');
9  });
10  blackBg.addEventListener('click', function() {
11    body.classList.remove('nav-open');
12  });
13
14}
15toggleNav();
16
17//ページ内リンク
18$(function(){
19  $('a[href^="#"]').click(function(){
20    var speed = 500;
21    var href= $(this).attr("href");
22    var target = $(href == "#" || href == "" ? 'html' : href);
23    var position = target.offset().top;
24    $("html, body").animate({scrollTop:position}, speed, "swing");
25    return false;
26  });
27	
28});

補足情報（FW/ツールのバージョンなど）

参考にしたサイトです。```https://tech-dig.jp/hamburger-global-nav/



### 試したこと

aタグにclass="close"を追加し、JavaScriptでclass="close"を取得しリンクをクリックした時に.nav-openのクラスを削除しハンバーガーメニューを閉じる。
これを試してみましたがエラーが出てしまいました。コードの書き方など間違っている可能性があります。
エラー↓
index.html:437 Uncaught TypeError: target.addEventListener is not a function　at toggleNav (index.html:437)at index.html:442

変更点↓
css
<li class="nav-item"><a href="#campaign" class="close">campaign<span class="jp">キャンペーン</span></a></li>

JavaScript

function toggleNav() {
	var body = document.body;
	var hamburger = document.getElementById('js-hamburger');
	var blackBg = document.getElementById('js-black-bg');

	hamburger.addEventListener('click', function() {
	body.classList.toggle('nav-open');
	});

	blackBg.addEventListener('click', function() {
	body.classList.remove('nav-open');
	});
	
//追加したコード
	let target = document.getElementsByClassName('close');
		target.addEventListener('click', function() {
		body.classList.remove('nav-open');
	});
}
toggleNav();

m.ts10806

2020/07/23 20:56

「スムーズスクロール」にあたる部分はどこでしょうか。コピペは構わないかと思いますが、理解できていないコードをそのまま丸投げするのは結局理解につながらないので、やめたほうが良いかと思います。せめて６割～は書いたコードを理解しておくようにしましょう（全て理解すべきではありますけど）

keisuke95

2020/07/23 21:08

ご返信ありがとうございます。本当にその通りですね。今後は理解するように気をつけます。スムーズスクロールのコードを追記しました。

m.ts10806

2020/07/23 21:43

今からでも少しでも理解してその旨を追記しようとは思わない、ということでしょうか。お急ぎであれば質問して答えを待つのではなくクラウドワークスへどうぞ。

keisuke95

2020/07/23 21:57

そのようなつもりではなかったのですが気に障ったのであれば申し訳ありません。ここで質問するまでにも色々調べてから質問させていただいています。

m.ts10806

2020/07/23 22:00

>そのようなつもりではなかったのですが気に障ったのであれば申し訳ありません。いえ、気に障ったのではなく、ガイドラインに触ってます（丸投げは推奨していない質問） https://teratail.com/help/avoid-asking >ここで質問するまでにも色々調べてから質問させていただいています。書いてないことは伝わらないので、その「色々調べた」ことは伝わりません。本当に何も調べず試さず丸投げする人もいるので、何も書いてなければ何もしてないままの丸投げであると解釈します。あくまで見るのは赤の他人なので。

keisuke95

2020/07/23 22:21

たしかに安易な質問でした。自分でまた調べ直します。ご返信ありがとうございました。

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

回答2件

書き込まれたコードをブラウザで試したところ
ナビゲーションが出てこない。
スクロール対象がない。
スクロール対象がないのでスムーススクロールしようがない。

そのため質問に答えるためにこちらで、ナビゲーションが表示されるようにし、
スクロール対象を作成しスムーススクロールを実装しないといけないため面倒でした。
ですので、次からは最低限、張り付けたコードで現状で出来ている動作はするように
したほうがよいと思います。

以下はhtmlファイルに張り付ければ動作するコードサンプルになります。

HTML
1<!DOCTYPE html>
2<html lang="ja">
3
4<head>
5    <title>test</title>
6    <style>
7        body {
8            margin: 0;
9        }
10
11        .nav {
12            position: fixed;
13            right: -320px;
14            top: 0;
15            width: 300px;
16            height: 100vh;
17            padding-top: 40px;
18            background-color: #fff;
19            transition: all .6s;
20            z-index: 200;
21            overflow-y: auto;
22        }
23
24        .start {
25            animation: anime 0.3s forwards;
26        }
27
28        @keyframes anime {
29            0% {
30                right: -320px;
31            }
32
33            10% {
34                right: -288px;
35            }
36
37            20% {
38                right: -256px;
39            }
40
41            30% {
42                right: -224px;
43            }
44
45            40% {
46                right: -192px;
47            }
48
49            50% {
50                right: -160px;
51            }
52
53            60% {
54                right: -128px;
55            }
56
57            70% {
58                right: -96px
59            }
60
61            80% {
62                right: -64px
63            }
64
65            90% {
66                right: -32px;
67            }
68
69            100% {
70                right: 0
71            }
72
73        }
74
75        .hamburger {
76            position: fixed;
77            cursor: pointer;
78            z-index: 300;
79            background-color: rgba(0, 0, 0, 0.5);
80            color: white;
81            padding: 0;
82            outline: none;
83            border: none;
84            display: inline-block;
85            right: 30px;
86            top: 20px;
87            width: 50px;
88            height: 50px;
89            font-size: 50px;
90            line-height: 55px;
91        }
92
93        .nav-list {
94            margin: 0;
95            padding: 0;
96            list-style: none;
97        }
98
99        .nav-item {
100            text-align: center;
101            padding: 0 14px;
102        }
103
104        .nav-item a {
105            display: block;
106            padding: 8px 0;
107            border-bottom: 1px solid #eee;
108            text-decoration: none;
109            color: #111;
110        }
111
112        .nav-item a:hover {
113            background-color: #eee;
114        }
115
116        .close {
117            position: fixed;
118            left: 0;
119            top: 0;
120            width: 100vw;
121            height: 100vh;
122            z-index: 100;
123            background-color: #000;
124            opacity: 0;
125            visibility: hidden;
126            transition: all .6s;
127            cursor: pointer;
128        }
129
130        .nav-open .global-nav {
131            right: 0;
132        }
133
134        .nav-open .close {
135            opacity: .8;
136            visibility: visible;
137        }
138
139        .nav-open .hamburger__line--1 {
140            transform: rotate(45deg);
141            top: 20px;
142        }
143
144        .nav-open .hamburger__line--2 {
145            width: 0;
146            left: 50%;
147        }
148
149        .nav-open .hamburger__line--3 {
150            transform: rotate(-45deg);
151            top: 20px;
152        }
153
154        .page01 {
155            text-align: center;
156            width: 100%;
157            height: 100vh;
158            background-position: center;
159            background-repeat: no-repeat;
160            background-color: rgba(230, 20, 20, 0.5);
161            position: relative;
162        }
163
164        .page01 div {
165            width: 60vw;
166            height: 40vw;
167            background-color: rgba(20, 20, 230, 0.5);
168            position: absolute;
169            top: 50%;
170            left: 50%;
171            transform: translate(-50%, -50%);
172        }
173
174        .page02 {
175            text-align: center;
176            width: 100%;
177            height: 100vh;
178            background-position: center;
179            background-repeat: no-repeat;
180            background-color: rgba(20, 20, 230, 0.5);
181            position: relative;
182        }
183
184        .page02 div {
185            width: 60vw;
186            height: 40vw;
187            background-color: rgba(230, 20, 20, 0.5);
188            position: absolute;
189            top: 50%;
190            left: 50%;
191            transform: translate(-50%, -50%);
192        }
193
194        .page03 {
195            text-align: center;
196            width: 100%;
197            height: 100vh;
198            background-position: center;
199            background-repeat: no-repeat;
200            background-color: rgba(20, 230, 20, 0.5);
201            position: relative;
202        }
203
204        .page03 div {
205            width: 60vw;
206            height: 40vw;
207            background-color: rgba(20, 20, 230, 0.5);
208            position: absolute;
209            top: 50%;
210            left: 50%;
211            transform: translate(-50%, -50%);
212        }
213    </style>
214</head>
215
216<body>
217    <nav id="navJs" class="nav">
218        <ul class="nav-list">
219            <li id="li01Js" class="nav-item">page01</li>
220            <li id="li02Js" class="nav-item">page02</li>
221            <li id="li03Js" class="nav-item">page03</li>
222        </ul>
223
224        <ul class="btn-list">
225            <li class="btn-item"><a href="">WEB入会はこちら</a></li>
226            <li class="btn-item"><a href="">見学・体験予約はこちら</a></li>
227            <li class="btn-item"><a href="">お問い合わせ</a></li>
228        </ul>
229    </nav>
230
231    <button class="hamburger hide" id="burgerBtnJs">開</button>
232    <div id="page01Js" class="page01">
233        <div>
234
235        </div>
236    </div>
237    <div id="page02Js" class="page02">
238        <div>
239
240        </div>
241    </div>
242    <div id="page03Js" class="page03">
243        <div>
244
245        </div>
246    </div>
247    <div class="close" id="closeJs"></div>
248    <script>
249        const body = document.body;
250        const hamburger = document.getElementById('burgerBtnJs');
251        const blackBg = document.getElementById('closeJs');
252
253        hamburger.addEventListener('click', function () {
254            body.classList.toggle('nav-open');
255            navJs.classList.toggle("start");
256            hamburger.innerText === "開" ? hamburger.innerText = "閉" : hamburger.innerText = "開"
257        });
258        blackBg.addEventListener('click', function () {
259            hamburger.click();
260        });
261
262        const scroll = (target) => {
263            target.scrollIntoView({
264                behavior: "smooth",
265                block: "end"
266            })
267        }
268
269        const navItem = document.getElementsByClassName("nav-item");
270
271        for (let i = 0, maxLen = navItem.length; i < maxLen; i++) {
272            navItem[i].addEventListener('click', () => {
273                hamburger.click();
274                switch (i) {
275                    case 0:
276                        scroll(page01Js);
277                        break;
278                    case 1:
279                        scroll(page02Js);
280                        break;
281                    case 2:
282                        scroll(page03Js);
283                        break;
284                }
285            });
286        }
287
288    </script>
289</body>
290
291</html>
292