コード< 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');
}
});
link.addEventListenerAll('click', function() {
ham.classList.remove('active');
fix.classList.remove('active');
nav.classList.remove('active');
});
質問 初心者です 現在、ハンバーガーメニューのページ内リンクをクリックした時にメニュー画面を閉じたいのですが開いたままリンク先に移動してしまいます。 ### 実現したいこと ページ内リンクをクリックした時にメニュー画面を閉じてリンク先に移動 ### 発生している問題・エラーメッセージ
エラーメッセージ
### 該当のソースコード ```ここに言語名を入力 ソースコード
試したこと
ページ内リンクのa タグの href 属性をクリックしたら#js-navと#js-hamburger
のactiveをremoveするというコードを追加してみたのですが一つ目のページ内リンク
には反応するようになったのですがその他の時にはリンク位置までスクロールするだけでメニューは閉じませんでした。
ここに問題に対して試したことを記載してください。
補足情報(FW/ツールのバージョンなど)
ここにより詳細な情報を記載してください。
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。