ハンバーガーメニュー ページ内リンクをクリックすると閉じる仕様にしたいです。

Question

実現したいこと

• ハンバーガーメニュー　ページ内リンクをクリックすると閉じる仕様にしたいです。

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

リンクをクリックしてもメニューが閉じません。
リンク先には飛びます。

該当のソースコード

ソースコード
```<!-- スマホ用メニュー -->
      <div class="h-menu">
        <input id="h-menu_checkbox" class="h-menuCheckbox" type="checkbox">
        <label class="h-menu_icon" for="h-menu_checkbox"><span class="hamburger-icon"></span></label>
        <label id="h-menu_black" class="h-menuCheckbox" for="h-menu_checkbox"></label>
        <div id="h-menu_content">
          <ul>
            <li><a href="#top">TOP</a></li>
            <li><a href="#当社について">当社について</a></li>
            <li><a href="#取り扱いプラン一覧">取り扱いプラン一覧</a></li>
            <li><a href="#加入事例">加入事例</a></li>
            <li><a href="#無料見積もり・個別相談">無料見積もり・個別相談</a></li>
            <li><a href="#お客様の声">お客様の声</a></li>
            <li><a href="#よくあるご質問">よくあるご質問</a></li>
        </div>
      </div>
```CSS

 /*ハンバーガーメニュー*/
  .h-menu_icon {
    display: inline-block;
    width: 30px;
    height: 30px;
    vertical-align: middle;
  }

  /*3本線*/
  .hamburger-icon,
  .hamburger-icon::before,
  .hamburger-icon::after {
    content: '';
    display: block;
    position: absolute;
    z-index: 100;
    top: 0;
    bottom: 0;
    width: 25px;
    height: 3px;
    background: #AD0000;
    cursor: pointer;
  }

  .hamburger-icon:before {
    top: 10px;
  }

  .hamburger-icon:after {
    top: 20px;
  }

  /*メニュー以外を暗くする*/
  #h-menu_black {
    display: none;
    position: fixed;
    z-index: 98;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: black;
    opacity: 0;
    transition: .7s ease-in-out;
  }

  /*中身*/
  #h-menu_content {
    position: fixed;
    top: 30px;
    right: 0;
    z-index: 99;
    width: 100%;
    max-width: 320px;
    height: 100vh;
    padding: 53px 16px 16px;
    background: #f3f3f3;
    overflow: auto;
    transition: .3s ease-in-out;
    -webkit-transform: translateX(-105%);
    transform: translateX(105%);
  }

  /*チェックボックスにチェックが入ったら表示*/
  input:checked~.h-menu_icon .hamburger-icon {
    background: transparent;
  }

  input:checked~.h-menu_icon .hamburger-icon::before {
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
    top: 10px;
    z-index: 999;
  }

  input:checked~.h-menu_icon .hamburger-icon::after {
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    top: 10px;
    z-index: 999;
  }

  input:checked~#h-menu_black {
    display: block;
    opacity: .8;
  }

  #h-menu_checkbox:checked~#h-menu_content {
    -webkit-transform: translateX(0%);
    transform: translateX(0%);
    box-shadow: 6px 0 25px rgba(0, 0, 0, .15);
  }

  .h-menu_icon .hamburger-icon,
  .h-menu_icon .hamburger-icon::before,
  .h-menu_icon .hamburger-icon::after,
  #h-menu_black,
  #h-menu_content {
    -webkit-transition: all .3s;
    transition: all .3s;
  }

  #h-menu_content ul {
    list-style: none;
    margin: 0;
    padding: 0;
  }

  #h-menu_content ul li {
    border-bottom: solid 1px black;
  }

  #h-menu_content li a {
    display: block;
    color: black;
    font-size: 14px;
    padding: 24px;
    text-decoration: none;
    transition-duration: 0.2s;
  }

  #h-menu_content li a:hover {
    background: #ffafaf;
  }

試したこと

teratail内で同様の質問（10個ほど）に対する回答を見ながら解決を図りましたが、うまく機能しませんでした。

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

こちらのサイトを参考にして、ハンバーガーメニューを作成いたしました。
https://www.kitaguniweb.com/cat-diary/2020/p-9311/

他の質問者様も同様の質問をされている中、個別に回答を求める質問をしてしまい申し訳ございません。。
どなたかご協力の程、よろしくお願いいたします。

Answer 1

jsを使用して良いならpopstateでチェックを外してください

window.addEventListener('popstate',()=>{
  document.querySelector('#h-menu_checkbox').checked=false;;
});

Comments

[tky-design]

ご回答いただいたjsの上記コードで解決いたしました！
この度は迅速なご回答、誠にありがとうございました。

[tky-design]

度々申し訳ございません。

上記コードを導入後、ディベロッパーツールでのスマホ画面の確認、サーバーアップロード後の実機での確認が済み、解決ができたかのように思われたのですが、クライアント様からWi-Fi環境下だと約10秒が経過後にメニューをタップすると閉じるが、10秒以内だとメニューが閉じないとご指摘を受けました。
こちらでWi-Fi環境下で再度確認しても正常にメニューが閉じるのですが、何かWi-Fiによって変わるようなことなどあるのでしょうか？

ご教授いただけますと幸いです。

[tky-design]

【追記】javascriptは外部ファイルにして、</body>の直前で読み込ませています。

[yambejp]

popstateがダメならこう
document.addEventListener('click', e=>{
if(e.target.nodeName=="A" && e.target.closest('.h-menu')){
document.querySelector('#h-menu_checkbox').checked=false;
}
});