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

Question

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

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

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

該当のソースコード

<nav class="navi" id="navi">
          <ul>
            <li><a class="top return" href="#">TOP</a></li>
            <li><a class="return" href="#information">INFORMATION</a></li>
            <li><a class="return" href="#gallery">GALLERY</a></li>
            <li><a class="return" href="#access">ACCESS</a></li>
            <li><a class="return" href="#contact">CONTACT</a></li>
          </ul>
        </nav>

#header .navi {
  padding-top: 100px;
  text-align: center;
  z-index: 29;
  position: fixed;
  top: -300px;
  left: 0;
  width: 100%;
  height: 300px;
  background-color: #000;
  cursor: pointer;
  transition: all 0.5s;
}
.open #header .navi {
  top: 0px;
}

document.addEventListener("DOMContentLoaded",function(){
  let body=document.body;
  let hbg=document.getElementById('hbg').addEventListener('click',function(){
    body.classList.toggle('open');
  });
  let mask=document.getElementById('mask').addEventListener('click',function(){
    body.classList.remove('open');
  });
  let jump=document.querySelectorAll('#navi').addEventListener('click',function(){
    body.classList.remove('open');
  });
});

試したこと

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

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

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

Answer 1

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

.navi {
    padding-top: 100px;
    text-align: center;
    z-index: 29;
    position: fixed;
    top: -300px;
    left: 0;
    width: 100%;
    height: 300px;
    background-color: #000;
    cursor: pointer;
    transition: all 0.5s;
    color:white;
  }
  .open{//付け外しの為のクラスならこれだけでいいです
    top:0px;
  }

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

Comments

[zuru17830405]

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