ハンバーガーメニュー閉じない

< HTML > <header class="header"> <div class="header__inner"> <nav class="header__nav nav" id="js-nav"> <ul class="nav__items nav-items"> <li class="nav-items__item"><a href="#service">メニュー</a></li> <li class="nav-items__item"><a href="">メニュー</a></li> <li class="nav-items__item"><a href="">メニュー</a></li> <li class="nav-items__item"><a href="">メニュー</a></li> </ul> </nav> <button class="header__hamburger hamburger" id="js-hamburger"> <span></span> <span></span> <span></span> </button> </div> </header> < css > .header__hamburger { width: 50px; height: 100%; } .hamburger { background-color: transparent; border-color: transparent; z-index: 9999; span { width: 100%; height: 2px; background-color: #0A42CE; position: relative; transition: ease .4s; display: block; } } .hamburger span:nth-child(1) { top: 0; } .hamburger span:nth-child(2) { margin: 8px 0; } .hamburger span:nth-child(3) { top: 0; } /* ハンバーガーメニュークリック後のスタイル */ #js-nav.active { transform: translateX(0); } .hamburger.active span:nth-child(1) { top: 5px; transform: rotate(45deg); background-color: #fff; } .hamburger.active span:nth-child(2) { opacity: 0; } .hamburger.active span:nth-child(3) { top: -13px; transform: rotate(-45deg); background-color: #fff; } < javaScript > // ハンバーガーメニューの開閉 const fix = document.documentElement; const ham = document.querySelector('#js-hamburger'); const nav = document.querySelector('#js-nav'); ham.addEventListener('click', function () { if (!this.classList.contains('active')) { this.classList.add('active'); fix.classList.add('fixed'); nav.classList.add('active'); } else { this.classList.remove('active'); fix.classList.remove('fixed'); nav.classList.remove('active'); } }); ```### 前提 質問 初心者です 現在、ハンバーガーメニューのページ内リンクをクリックした時にメニュー画面を閉じたいのですが開いたままリンク先に移動してしまいます。 ### 実現したいこと ページ内リンクをクリックした時にメニュー画面を閉じてリンク先に移動 ### 発生している問題・エラーメッセージ

エラーメッセージ

### 該当のソースコード ```ここに言語名を入力 ソースコード

試したこと

ここに問題に対して試したことを記載してください。

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

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

コメントを投稿

0 コメント