htmlとcssで書いたヘッダーのボタンが反応しない

実現したいこと

ウェブサイトのレスポンシブ対応で、ドロワーメニューのボタンを押すとメニュー画面が開くようにしたい

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

ドロワーメニュー（ハンバーガーアイコン）を押下しても反応がない

該当のソースコード

html

1 <div id="nav-drawer">2 <button class="openbtn1 sp"><span></span><span></span></button>3 <nav id="g-nav">4 <ul class="header_ul pc">5 <li><a class="header_link" href="#">１</a></li>6 <li><a class="header_link" href="#">２</a></li>7 <li><a class="header_link" href="#">３</a></li>8 <li><a class="header_link" href="#">４</a></li>9 <li><a class="header_link" href="#">５</a></li>10 </ul>11 </nav>12 </div>

css

1 .openbtn1{2 position: relative;3 z-index: 9999;4 top: -7px;5 width: 40px;6 height: 40px;7 vertical-align: middle;8 border: none;9 outline: none;10 background: transparent;11 padding-right: 15px;12 cursor: pointer;13 }14 /*×に変化*/ 15 .openbtn1 span{16 display: inline-block;17 transition: all .4s;18 position: absolute;19 height: 1.5px;20 border-radius: 2px;21 background-color: #464646;22 }23 .openbtn1 span:nth-of-type(1) {24 top:22px; 25 width: 25px;26 }27 .openbtn1 span:nth-of-type(2) {28 top:29px;29 width:20px;30 }31 .openbtn1.active span:nth-of-type(1) {32 top: 20px;33 left: 16px;34 transform: translateY(6px) rotate(-45deg);35 width: 55%;36 }37 .openbtn1.active span:nth-of-type(2){38 top: 32px;39 left: 16px;40 transform: translateY(-6px) rotate(45deg);41 width: 55%;42 }43 #g-nav{44 width: 100%;45 height: 100vh;46 background: #fff;47 transition: all 0.3s;48 display: block;49 position: fixed;50 top: 0;51 left: 0;52 background-color: #FFFFFF;53 text-align: center;54 z-index: -1;55 }56 /*アクティブクラスがついたら透過なしにして最前面へ*/57 #g-nav.panelactive{58 opacity: 1;59 z-index:999;60 }61 /*ナビゲーションの縦スクロール*/62 #g-nav.panelactive #g-nav-list{63 /*ナビの数が増えた場合縦スクロール*/64 position: fixed;65 z-index: 999; 66 width: 100%;67 height: 100vh;/*表示する高さ*/68 overflow: auto;69 -webkit-overflow-scrolling: touch;70 }71 /*ナビゲーション*/72 #g-nav ul {73 display: none;74 /*ナビゲーション天地中央揃え*/75 position: absolute;76 z-index: 999;77 left:50%;78 transform: translate(-50%,-50%);79 padding-top: 376px;80 }81 #g-nav.panelactive ul {82 display: block;83 }

js

1//ハンバーガーメニュー2 $(".openbtn1").click(function () {//ボタンがクリックされたら3 $(this).toggleClass('active');//ボタン自身に activeクラスを付与し4 $("#g-nav").toggleClass('panelactive');//ナビゲーションにpanelactiveクラスを付与5 });6 7 $("#g-nav a").click(function () {//ナビゲーションのリンクがクリックされたら8 $(".openbtn1").removeClass('active');//ボタンの activeクラスを除去し9 $("#g-nav").removeClass('panelactive');//ナビゲーションのpanelactiveクラスも除去10 });11

試したこと・調べたこと

上記の詳細・結果

以前自分で書いたコードでは反応していて、そのままコピペしているのですがこちらでは反応しませんでした

補足

特になし