ハンバーガーメニューの挙動

ハンガーメニューの挙動に関して、ハンバーガーボタンを押すと開閉するのですが、中のリンク部分を押しても、ハンバーガーメニューが閉じません。どのように改善すれば良いのでしょうか？

HTML
1<header class="header">
2    <button class="hamburger">
3        <span></span>
4        <span></span>
5        <span></span>
6    </button>
7    <div class="hamburger-nav">
8        <div class="hamburger-nav__list">
9            <ul>
10                <li class="hamburger-nav__list--cell"><a href="#top">Top</a></li> 
11                <li class="hamburger-nav__list--cell"><a href="#menu">Menu</a></li> 
12                <li class="hamburger-nav__list--cell"><a href="#about">About</a></li> 
13                <li class="hamburger-nav__list--cell"><a href="#history">History</a></li>
14                <li class="hamburger-nav__list--cell"><a href="#contact">COntact</a></li> 
15            </ul>
16        </div>
17   </div>
18</header>

SCSS
1body.fixed {
2  width: 100%;
3  height: 100%;
4  position: fixed;
5}
6.header {
7  position: relative;
8  height: 7.2rem;
9  width: 100%;
10
11  .hamburger {
12    position: absolute;
13    z-index: 1000;
14    top: 50%;
15    transform: translateY(-50%);
16    right: 2rem;
17    cursor: pointer;
18    width: 5rem;
19    height: 5rem;
20    background: transparent;
21    border: none;
22
23    & span{
24      display: inline-block;
25      transition: all .4s;
26      position: absolute;
27      top: 50%;
28      left: 50%;
29      transform: translate(-50%, -50%);
30      height: 0.3rem;
31      background-color: #333;
32      width: 50%;
33
34      &:nth-of-type(1) {
35        top: 1.5rem;
36      }
37
38      &:nth-of-type(2) {
39        top: 2.3rem;
40      }
41
42      &:nth-of-type(3) {
43        top: 3.1rem;
44      }
45    }
46
47    &.active span:nth-of-type(1) {
48      top: 1.8rem;
49      left: 1.8rem;
50      transform: translateY(0.6rem) rotate(-45deg);
51      width: 50%;
52    }
53    &.active span:nth-of-type(2) {
54      opacity: 0;
55    }
56
57    &.active span:nth-of-type(3){
58      top: 3rem;
59      left: 1.8rem;
60      transform: translateY(-0.6rem) rotate(45deg);
61      width: 50%;
62    }
63  }
64
65  .hamburger-nav {
66    position:fixed;
67    z-index: 900;
68    top: -120%;
69    left: 0;
70    width: 100%;
71    height: 100vh;
72    background: #4169e1;
73    transition: all 0.6s;
74    &.panel-active {
75    top: 0;
76    }
77
78    &.panel-active &__list {
79      position: fixed;
80      z-index: 1000;
81      width: 100%;
82      height: 100vh;
83      overflow: auto;
84      -webkit-overflow-scrolling: touch;
85    }
86    &__list {
87      & ul {
88        position: absolute;
89        z-index: 900;
90        top: 50%;
91        left: 50%;
92        transform: translate(-50%,-50%);
93
94        & li {
95          list-style: none;
96          text-align: center;
97          font-size: 3rem;
98          margin: 3rem auto;
99        }
100        & li a {
101          color: #333;
102          text-decoration: none;
103          padding: 1rem;
104          display: block;
105          text-transform: uppercase;
106          letter-spacing: 0.1em;
107          font-weight: bold;
108          &:hover {
109            color: red;
110          }
111        } 
112      }
113    }
114  }
115}

JavaScript
1const hamburger = document.querySelector('.hamburger');
2const nav = document.querySelector(".hamburger-nav");
3const body = document.querySelector("body");
4const link = document.querySelectorAll(".hamburger-nav__list--cell");
5
6hamburger.onclick = function() {
7  hamburger.classList.toggle('active');
8  nav.classList.toggle('panel-active');
9  body.classList.toggle("fixed");
10  console.log('open');
11}
12link.onclick = function() {
13  hamburger.classList.remove('active');
14  nav.classList.remove('panel-active');
15  body.classList.remove("fixed");
16  console.log('close');
17}

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

回答1件

ベストアンサー

document.querySelectorAll(".hamburger-nav__list--cell");は配列みたいな要素なので
linkだけだど、何番目のlink？となっちゃう為、なんらかの方法でlink全部にしてほしい処理の指定をします。

例)

javascript
1link.forEach((linkElm) => {
2  console.log(linkElm);
3  linkElm.onclick = function () {
4    hamburger.classList.remove("active");
5    nav.classList.remove("panel-active");
6    body.classList.remove("fixed");
7    console.log("close");
8  };
9});