ハンバガーメニューをクリックしてもスマホメニューが出てきません。

Question

前提

あるWEBサイトを参考にして、レスポンシブデザインにてハンバガーメニューを作成しました。
ところがハンバガーメニューをクリックしてもスマホメニューが出てきません。

実現したいこと

ハンバガーメニューをクリックすると画面の上（外）から下にスマホメニューが出てくるようにしたいです。
ちなみに、ヘッダーは、他ページに共有できるように、別ファイルで作成し、メインのHTMLに読み込んでおります。

該当のソースコード

参考サイトによると、HTMLの＜/head＞(閉じタグ)の直前に下記のコードを入れるようになっています。

index.html

.hamburger-box＝ハンバガーメニューの３本線
.close＝スマホメニューの「閉じる」ボタン　

<script src="https://code.jquery.com/jquery-2.2.4.js" integrity="sha256-iT6Q9iMJYuQiMWNd9lDyBUStIq/8PuOW33aOqmvFpqI=" crossorigin="anonymous"></script>
<!-- スマホナビの表示・非表示 -->
<script>
$(function() {
   const hum = $('.hamburger-box, .close')
   const nav = $('.sp-nav')
   hum.on('click', function(){
      nav.toggleClass('toggle');
   });
});
</script>
</head>

header.html

<header class="header">
  <div class="header_container">
    <h1 class="logo"><a href="index.html">KAGUICHI</a></h1>
     <!-- PC用のメニュー（1025px以上） -->
    <nav class="pc-nav">
      <ul class="menu">
        <li class="menu-list"><a href="company.html">取扱い家具</a></li>
        <li class="menu-list"><a href="パス">販売店・展示場一覧</a></li>
        <li class="menu-list"><a href="パス">採用情報</a></li>
        <li class="menu-list"><a href="パス">お知らせ</a></li>
        <li class="menu-list online"><a href="パス"><i class="fa-solid fa-cart-shopping"></i>ONLINE STORE</a></li>
        <li class="menu-list contact"><a href="パス"><i class="fa-solid fa-envelope"></i>お問い合わせ</a></li>
      </ul><!-- /menu -->
    </nav><!-- /pc-nav -->

    <!-- スマホ用メニュー（1024px以下） -->
    <nav class="sp-nav">
      <ul class="sp-menu">
         <li><a href="#" class="sp-menu-list">取扱い家具</a></li>
         <li><a href="#" class="sp-menu-list">販売店・展示場一覧</a></li>
         <li><a href="#" class="sp-menu-list">採用情報</a></li>
         <li><a href="#" class="sp-menu-list">お知らせ</a></li>
         <li><a href="#" class="sp-menu-list">ONLINE STORE</a></li>
         <li><a href="#" class="sp-menu-list">お問い合わせ</a></li>
         <li class="close"><span class="sp-menu-list">閉じる</span></li>
      </ul>
    </nav><!-- /sp-nav -->

    <!-- ハンバーガーメニュー（1024px以下） -->
    <div class="hamburger-box">
      <span class="hamburger-box-centerLine"></span>
    </div>
  </div><!-- /header-container -->
</header><!-- /header -->

CSS（スマホメニュー表示させるコード）

.toggle {
  transform: translateY( 0 );
  opacity: 1;
}

試したこと

デベロッパーツールにて、
スマホメニューに「toggle」クラスを入力し、スマホメニューがちゃんと表示されることは確認できております。

注意事項

ヘッダーは、他ページに共有できるように、別ファイルで作成ししております。

header.js を作成すべきでしょうか。
jQueryの書き方,
jQueryの読み込み方が悪いのでしょうか。

御教示のほどよろしくお願い致します。

Comments

[recal]

どんなエラー表示がでていますか？

Answer 1

</body>直前に移動しても駄目でしょうか？

<script>
$(function() {
   const hum = $('.hamburger-box, .close')
   const nav = $('.sp-nav')
   hum.on('click', function(){
      nav.toggleClass('toggle');
   });
});
</script>
</body>

Comments

[raidoindy]

ご回答ありがとうございます。
</body>直前に移動しても駄目でした。

今回、ヘッダーは別ファイル（header.html）で作成し、
下記のようなjsのコードで、indx.htmlにインクルードしています。

fetch("header.html")
.then(response => {
return response.text()
})
.then(data => {
document.querySelector("header").innerHTML = data;
});

読み込む順番がダメなんでしょうか。

ちなみに、インクルードをせず、ヘッダーをindex.htmlに書き込むと、ハンバーガーメニューは反応します。

いかがでしょうか。