ハンバーガーメニューのページ内リンクを押した時にハンバーガーメニューを閉じるようにしたい

Question

実現したいこと

ハンバーガーメニューのページ内リンクを押した時にハンバーガーメニューを閉じるようにしたいです。

発生している問題・分からないこと

ハンバーガーメニューのページ内リンクを押した時にハンバーガーメニューを閉じるようにしたく、調べながらやっているのですがうまく出来ません。かなりの初心者なのでコードはメチャクチャかもしれませんが、どなたかご教示ください。よろしくお願いします。

該当のソースコード

<!--ハンバーガーメニュー-->
       <button class="hamburger-morph" aria-label="メニュー" aria-controls="morph-menu" aria-expanded="false">
         <svg class="hamburger-morph__icon" width="48" height="48" viewBox="0 0 100 100">
           <path class="hamburger-morph__line" d="M 20,29 H 80 C 80,29 94.5,28.817352 94.532987,66.711331 94.543142,77.980673 90.966081,81.670246 85.259173,81.668997 79.552261,81.667751 75.000211,74.999942 75.000211,74.999942 L 25.000021,25.000058" />
           <path class="hamburger-morph__line" d="M 20,50 H 80" />
           <path class="hamburger-morph__line" d="M 20,71 H 80 C 80,71 94.5,71.182648 94.532987,33.288669 94.543142,22.019327 90.966081,18.329754 85.259173,18.331003 79.552261,18.332249 75.000211,25.000058 75.000211,25.000058 L 25.000021,74.999942" />
         </svg>
       </button>

       <nav id="morph-menu" class="nav-morph" aria-hidden="true">
         <div class="nav-morph__wrapper">
           <ul class="nav-morph__list">
             <li class="nav-morph__item">
               <a href="#about" href="#" class="nav-morph__link">
                 <span class="nav-morph__text">ABOUT</span>
                 <span class="nav-morph__hover">私について</span>
               </a>
             </li>
             <li class="nav-morph__item">
               <a href="#design" href="#" class="nav-morph__link">
                 <span class="nav-morph__text">DESIGN</span>
                 <span class="nav-morph__hover">作ったもの</span>
               </a>
             </li>
             <li class="nav-morph__item">
               <a href="#contact" href="#" class="nav-morph__link">
                 <span class="nav-morph__text">CONTACT</span>
                 <span class="nav-morph__hover">ご連絡</span>
               </a>
             </li>
           </ul>
         </div>
       </nav>

$('#nav-morph__list a[href]').on('click', function(event) {
    $('.hamburger-morph').trigger('click');
});

試したこと・調べたこと

• teratailやGoogle等で検索した
• ソースコードを自分なりに変更した
• 知人に聞いた
• その他

上記の詳細・結果

JavaScriptが反映されません。

補足

特になし

Answer 1

#nav-morph__listがHTMLに見当たらないようです。.nav-morph__listの誤りではありませんか？

Comments

[ymyo]

ご回答ありがとうございます！
直したのですが、まだ反映されませんでした、、、
他にも問題があるのでしょうか、、、😭

[Lhankor_Mhy]

当方では問題なく動作しました。
一応サンプルを置いておきます。
https://jsfiddle.net/Lhankor_Mhy/ja1z540m/

もしかすると、ここに書かれていない部分に問題があるのかもしれません。たとえば、ハンバーガーアイコンをクリックしてもメニューを閉じるようになっていないとか。

[ymyo]

再度やり直したら無事閉じるようになりました！
非常に助かりました！ありがとうございます😭