ハンバーガーメニューを開いた時の操作について

実現したいこと

ハンバーガーメニューを開いて、リンク先をクリックしたらハンバーガーメニューが閉じるようにしたいです。後、開いたときスクロールできない、ボタンのhoverが反応しないようにしたいです。

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

ハンバーガーメニューを開いて、リンク先をクリックしてもハンバーガーメニューが閉じません。opactiyでmainを透明化しているだけなので、スクロールも出来てボタンも反応してしまいます。

該当のソースコード

html

1<header class="menu_header_sm">2 <div class="hamburger_menu">3 <div class="logo_sm">4 <a href="../index.html"><img class="menu_header_logo_sm" src="../img/logo.png" alt=""></a>5 </div>6 <div class="hamburger_menu_wrapper">7 <div class="menu-toggle">8 <div class="one"></div>9 <div class="two"></div>10 <div class="three"></div>11 </div>12 <nav>13 <ul role="navigation" class="hidden">14 <li><a href="#">SNS</a></li>15 <li><a href="#">Access</a></li>16 <li><a href="#">Event</a></li>17 <li><a href="#">Menu</a></li>18 <li><a href="#">Concept</a></li>19 <li><a href="#">Schedule</a></li>20 <li><a href="#">Contact</a></li>21 </ul>22 </nav>23 </div>24 </div>25 </header>26 <main>27 <div class="space1">28 <a href="#" class="button">Button</a>29 </div>30 <div class="space2">31 <a href="#" class="button">Button</a>32 </div>33 <div class="space3">34 <a href="#" class="button">Button</a>35 </div>36 </main>37 <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>38 <script>39 //ハンバーガーメニュー40 $(".menu-toggle").on('click', function() {41 $(this).toggleClass("on");42 $('.hamburger_menu_wrapper').toggleClass("on");43 $("nav ul").toggleClass('hidden');44 var currentOpacity = $('main').css('opacity');45 var newOpacity = currentOpacity === '1' ? '0.1' : '1';46 $('main').css('opacity', newOpacity); 47 });48 </script>

試したこと・調べたこと

上記の詳細・結果

以下のサイトの「スピード感②」を参考に、それ以外の部分は【mica the fox(AI)】に質問して作りました。
https://deshinon.com/2019/03/03/osyare-humbergermenu-css/
JavaScriptに関しては、ほとんど知識がありません。コピペして、class名を変更しただけです。

補足

特になし