ハンバーガーメニュー内の<a>を押してsectionに飛ぶときに一緒にnaviも閉じる仕様にしたいです

ハンバーガーメニューの中のnaviの<a>タグを押してsectionに飛ぶと共にハンバーガーメニューもフェードアウトさせたいです

発生している問題・エラーメッセージ

クリックしたsectionには飛ぶがメニューが閉じてくれないです

該当のソースコード

html
1<nav class="navi" id="navi">
2          <ul>
3            <li><a class="top return" href="#">TOP</a></li>
4            <li><a class="return" href="#information">INFORMATION</a></li>
5            <li><a class="return" href="#gallery">GALLERY</a></li>
6            <li><a class="return" href="#access">ACCESS</a></li>
7            <li><a class="return" href="#contact">CONTACT</a></li>
8          </ul>
9        </nav>

css
1#header .navi {
2  padding-top: 100px;
3  text-align: center;
4  z-index: 29;
5  position: fixed;
6  top: -300px;
7  left: 0;
8  width: 100%;
9  height: 300px;
10  background-color: #000;
11  cursor: pointer;
12  transition: all 0.5s;
13}
14.open #header .navi {
15  top: 0px;
16}

javascript
1document.addEventListener("DOMContentLoaded",function(){
2  let body=document.body;
3  let hbg=document.getElementById('hbg').addEventListener('click',function(){
4    body.classList.toggle('open');
5  });
6  let mask=document.getElementById('mask').addEventListener('click',function(){
7    body.classList.remove('open');
8  });
9  let jump=document.querySelectorAll('#navi').addEventListener('click',function(){
10    body.classList.remove('open');
11  });
12});

試したこと

逆にクラスを追加してメニューを閉じてみようと思ったけどダメ
functionを分けてみたけど思った様にいかない

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

みづらいコードの書き方だと思いますがお手を借りたいです、お願いします

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

回答1件

ベストアンサー

なんとか動くようになりましたが、質問と回答というよりもデバッグ作業でした・・・
どうして？と思うレベルの勘違いとコードを見様見真似で書いている印象だったので、もう少しだけ基礎を勉強し直した方がよろしいかと・・・

CSS
1.navi {
2    padding-top: 100px;
3    text-align: center;
4    z-index: 29;
5    position: fixed;
6    top: -300px;
7    left: 0;
8    width: 100%;
9    height: 300px;
10    background-color: #000;
11    cursor: pointer;
12    transition: all 0.5s;
13    color:white;
14  }
15  .open{//付け外しの為のクラスならこれだけでいいです
16    top:0px;
17  }

Java
1        document.addEventListener("DOMContentLoaded", function () {
2            //bodyでは断じてありません！
3            let navi = document.getElementById('navi');
4            let hbg = document.getElementById('hbg').addEventListener('click', function () {
5                navi.classList.toggle('open');
6            });
7　　　　　　　//提供されたコードにはなかったのでコメントアウト
8            /*let mask = document.getElementById('mask').addEventListener('click', function () {
9                navi.classList.remove('open');
10            });*/
11            //クリックイベントに設定するのは、#naviではなく、各Aタグのクラスであるreturnです！
12            let returns = document.getElementsByClassName('return');
13　　　　　　 //querySelectorAllを使う場合でも同様の処理が必要です！
14            for (let i = 0; i < returns.length; i++) {
15                let jump = returns[i].addEventListener('click', function () {
16                    navi.classList.remove('open');
17                });
18            }
19        });

投稿2021/10/31 13:43

編集2021/10/31 14:06

tuna-kan

総合スコア23

zuru17830405

2021/10/31 23:47

ありがとうございました。変数をnaviにしてしまうとhtmlのコードの記述上ハンバーガーメニューすらも動かなくなってしまったので、変数はbodyのまま参考にさせていただいたら無事動く様になりました！！たしかに見様見真似でやっているところはあるかと思いますので、この模写コーディングが終わりましたらもう一度基礎からやり直そうかと思います。

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