ハンバーガーメニュー内のリストをクリック後自動でメニューを閉じたい

＊解決したいこと
ハンバーガーメニュー内のリストをクリック後、自動でハンバーガーメニューを閉じたい

＊現状
メニュー内のリストにページ内リンクをつけており、リストをクリックすると指定した位置まで遷移するが、ハンバーガーメニューが閉じない

下記該当コードとなります。
以上、ご教授頂けますと幸甚です。

html
1<nav class="global-nav">
2 <ul class="global-nav__list">
3  <li class="global-nav__item"><a href="#features">特徴</a></li>
4  <li class="global-nav__item"><a href="#price">価格</a></li>
5  <li class="global-nav__item"><a href="#faq">よくある質問</a></li>
6  <li class="global-nav__item"><a href="#blog">ブログ</a></li>
7  <li class="global-nav__item"><a href="#works">制作実績</a></li>
8  <li class="global-nav__item"><a href="#contact">お問い合わせ</a></li>
9 </ul>
10</nav>
11<div class="hamburger" id="js-hamburger">
12 <span class="hamburger__line hamburger__line--1"></span>
13 <span class="hamburger__line hamburger__line--2"></span>
14 <span class="hamburger__line hamburger__line--3"></span>
15</div>
16<div class="black-bg" id="js-black-bg"></div>

css
1  .global-nav {
2    display: block;
3    position: fixed;
4    right: -320px;
5    top: 0;
6    width: 300px;
7    height: 100vh;
8    padding-top: 40px;
9    background-color: #fff;
10    transition: all .6s;
11    z-index: 200;
12    overflow-y: auto; 
13  }
14  .hamburger {
15    position: absolute;
16    right: 0;
17    top: 0;
18    width: 40px;
19    height: 40px;
20    cursor: pointer;
21    z-index: 300;
22  }
23  .global-nav__list {
24    margin: 0;
25    padding: 0;
26    list-style: none;
27  }
28  .global-nav__item {
29    text-align: center;
30    padding: 0 14px;
31  }
32  .global-nav__item a {
33    display: block;
34    padding: 8px 0;
35    border-bottom: 1px solid #eee;
36    text-decoration: none;
37    color: #111;
38  }
39  .global-nav__item a:hover {
40    background-color: #eee;
41  }
42  .hamburger__line {
43    position: absolute;
44    left: -10px;
45    width: 30px;
46    height: 3px;
47    background-color: #111;
48    transition: all .6s;
49  }
50  .hamburger__line--1 {
51    top: 35px;
52  }
53  .hamburger__line--2 {
54    top: 45px;
55  }
56  .hamburger__line--3 {
57    top: 55px;
58  }
59  .black-bg {
60    position: fixed;
61    left: 0;
62    top: 0;
63    width: 100vw;
64    height: 100vh;
65    z-index: 100;
66    background-color: #000;
67    opacity: 0;
68    visibility: hidden;
69    transition: all .6s;
70    cursor: pointer;
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: 45px;
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: 45px;
91  }

JS
1function toggleNav() {
2  var body = document.body;
3  var hamburger = document.getElementById('js-hamburger');
4  var blackBg = document.getElementById('js-black-bg');
5
6  hamburger.addEventListener('click', function() {
7    body.classList.toggle('nav-open');
8  });
9  blackBg.addEventListener('click', function() {
10    body.classList.remove('nav-open');
11  });
12}
13toggleNav();

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

回答2件

ベストアンサー

クラスglobal-nav__itemを持つ各要素のクリックに対するイベントリスナーを作ってあげれば良いかと思います。

JavaScript
1Array.from(document.getElementsByClassName('global-nav__item')).forEach(e => {
2  e.addEventListener('click', function() { 
3    document.body.classList.toggle('nav-open');
4  })
5});