ハンバーガーメニュー内のリンクをクリック後にメニューを閉じたい

Question

ハンバーガーメニュー内のリンクをクリックして、ページ内リンクはできるのですが、メニューがそのまま閉じずに残ってしまいます。

したいこと
ハンバーガーメニュー内のリンクをクリック後、ハンバーガーメニューを閉じたい

試したこと
以下の様にjsを実装してみたのですが、上手くいかなかった。

js初心者なため、よろしくお願いいたします

    <div id="navigation">
      <ul class="list-unstyled" id="navItems">
        <li><a href="#sec" class="text-dark h1 #navItem">Home</a></li>
        <li><a href="#about" class="text-dark h1 #navItem">About</a></li>
        <li><a href="#skill" class="text-dark h1 #navItem">Skill</a></li>
        <li><a href="#services" class="text-dark h1 #navItem">Services</a></li>
        <li><a href="#works" class="text-dark h1 #navItem">Works</a></li>
        <li><a href="#contact" class="text-dark h1 #navItem">Contact</a></li>
      </ul>
    </div>

#navigation {
  position: fixed;
  top: 0;
  right: -400px;
  width: 400px;
  height: 100vh;
  background: rgba(217,255,255,0.6);
  z-index: 1;
  display: grid;
  place-items: center;
  transition: 0.5s;
}
#navigation.active{
  right: 0;
}

    <script>
      $('#navItems a[href]').on('click', function(event) {
        $('#navItem').trigger('click');
    });
    </script>

Answer 1

以下のソースで解決できました

function toggle() {
  let home = document.getElementById("home");
  let nav = document.getElementById("navigation");
  let link = document.getElementById('naviItems');
  home.classList.toggle("active");
  nav.classList.toggle("active");
  link.addEventListener('click',()=>{
    home.classList.remove("active");
    nav.classList.remove("active");
  });
}

Answer 2

リンク遷移するaタグにidかclassを付与し、そのidかclassに対してonclickのハンドラを追加してみてください

ハンドラのコールバック関数は、ページ内リンクへの遷移とtoggleの実行です

Comments

[Surofuture]

ありがとうございます。
onclickハンドラと、コールバック関数の理解がまだまだで意味が理解できません。
コードなどを記載していただけると助かります。

[Surofuture]

リンク遷移するaタグに＃navItemを付与して、以下のjsを実装したらできました。
ありがとうございます。
$("#navItems a[href]").on("click", function (event) {
$("#navItem").trigger("click");
});

しかし、私は回答の意図は読めているのでしょうか？

[Surofuture]

すみません。時間が経つと、なぜかできなくなっていました。
できれば、コードを記載していただけると助かります。
よろしくお願いいたします