バーガーメニューのページ内リンクをクリックしたときにバーガーメニューが閉じない

前提

Webサイトのハンバーガーメニューの開閉をJavascriptで制御しているのですが、ハンバーガーメニューを開いた時にページ内リンクであるナビメニューを押してもハンバーガーメニューが閉じてくれません。

ハンバーガーメニューの開閉はクラスの付与・削除の切り替えで制御しており、エラーは表示されていません。

エラーが表示されていないということはどこかで単純なミスを犯していると思うのですが、JavaScript初学者のため自分ではどこが間違っているのかわかりません。

JavaScriptの以下の部分がうまく機能しません。

JavaScript
1navItems.forEach( (navItem) => {
2    navItem.addEventListener('click', () => {
3        burgerBtn.classList.remove('active');
4        headerNav.classList.remove('slide-in');
5        body.classList.remove('no-scroll');
6    });
7});

実現したいこと

ハンバーガーメニューのページ内リンクをクリックしたときにもハンバーガーメニューを閉じるようにしたい。

該当のソースコード

HTML
1<nav class="header-nav">
2    <ul class="nav-list">
3        <li class="nav-item"><a href="#works">Works</a></li>
4        <li class="nav-item"><a href="#service">Service</a></li>
5        <li class="nav-item"><a href="#about">About</a></li>
6        <li class="nav-item"><a href="contact.html">Contact</a></li>
7    </ul>
8</nav>

SCSS
1.burger-btn {
2    display: block;
3    position: relative;
4    z-index: 30;
5    cursor: pointer;
6    width: 50px;
7    height: 50px;
8    transition: all .5s;
9    .burger-btn-area {
10        transition: all .5s;
11        span {
12            display: inline-block;
13            transition: all .5s;
14            position: absolute;
15            width: 45%;
16            height: 3px;
17            background-color: #fff;
18            left: 14px;
19            border-radius: 2px;
20            &:nth-of-type(1) {
21                top: 15px;
22            }
23            &:nth-of-type(2) {
24                top: 23px;
25            }
26            &:nth-of-type(3) {
27                top: 31px;
28            }
29        }
30    }
31        /* ハンバーガーメニューがクリックされた後 */
32    &.active {
33        .burger-btn-area {
34            transform: rotateY(-360deg);
35        }
36        .bar {
37            &:nth-of-type(1) {
38                top: 18px;
39                left: 18px;
40                transform: translateY(6px) rotate(-135deg);
41            }
42            &:nth-of-type(2) {
43                opacity: 0;
44            }
45            &:nth-of-type(3) {
46                top: 30px;
47                left: 18px;
48                transform: translateY(-6px) rotate(135deg);
49            }
50        }
51    }
52}
53
54.no-scroll {
55    overflow: hidden;
56}
57
58.header-nav {
59            position: fixed;
60            top: -100%;
61            left: 100%;
62            z-index: 20;
63            background-color: #333;
64            width: 100vw;
65            height: 100vh;
66            transition: all 1s;
67            &.slide-in {
68                top: 0;
69                left: 0;
70            }
71            .nav-list {
72                position: absolute;
73                top: 50%;
74                left: 50%;
75                transform: translate(-50%, -50%);
76                text-align: center;
77                .nav-item {
78                    margin-bottom: 20px;
79                 }
80                    a {
81                        font-size: rem(20);
82                        font-weight: bold;
83                        color: #fff;
84                        position: relative;
85                        transition: all .5s;
86                        }
87                    }
88                }
89            }
90        }

JavaScript
1const burgerBtn = document.querySelector('.burger-btn');
2const headerNav = document.querySelector('.header-nav');
3const navItems = document.querySelectorAll('.nav-item');
4const body = document.querySelector('body');
5
6burgerBtn.addEventListener('click', () => {
7    burgerBtn.classList.toggle('active');
8    headerNav.classList.toggle('slide-in');
9    body.classList.toggle('no-scroll');
10});
11
12headerNav.addEventListener('click', () => {
13    burgerBtn.classList.toggle('active');
14    headerNav.classList.toggle('slide-in');
15    body.classList.toggle('no-scroll');
16});
17
18navItems.forEach( (navItem) => {
19    navItem.addEventListener('click', () => {
20        burgerBtn.classList.remove('active');
21        headerNav.classList.remove('slide-in');
22        body.classList.remove('no-scroll');
23    });
24});

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

ここにより詳細な情報を記載してください。

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

回答1件

ベストアンサー

イベントのバブリングが原因ですね。
クリックすると祖先要素のクリックイベントも発生します。

そのため、リンクでクラスをremoveしても、 header-navの toggle でクラスが付加されます。

stopPropagation メソッドでバブリングを停止すればいいでしょう。

JavaScript
1navItems.forEach( navItem => {
2    navItem.addEventListener('click', () => {
3        burgerBtn.classList.remove('active');
4        headerNav.classList.remove('slide-in');
5        body.classList.remove('no-scroll');
6        event.stopPropagation(); //追加
7    });
8});