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

Question

実現したいこと

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

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

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

該当のソースコード

		<div id="nav-drawer">
			<button class="openbtn1 sp"><span></span><span></span></button>
			<nav id="g-nav">
				<ul class="header_ul pc">
					<li><a class="header_link" href="#">１</a></li>
					<li><a class="header_link" href="#">２</a></li>
					<li><a class="header_link" href="#">３</a></li>
					<li><a class="header_link" href="#">４</a></li>
					<li><a class="header_link" href="#">５</a></li>
				</ul>
			</nav>
		</div>

  .openbtn1{
    position: relative;
    z-index: 9999;
    top: -7px;
    width: 40px;
    height: 40px;
    vertical-align: middle;
    border: none;
    outline: none;
    background: transparent;
    padding-right: 15px;
    cursor: pointer;
  }
  /*×に変化*/  
  .openbtn1 span{
    display: inline-block;
    transition: all .4s;
    position: absolute;
    height: 1.5px;
    border-radius: 2px;
    background-color: #464646;
  }
  .openbtn1 span:nth-of-type(1) {
      top:22px; 
      width: 25px;
  }
  .openbtn1 span:nth-of-type(2) {
      top:29px;
      width:20px;
  }
  .openbtn1.active span:nth-of-type(1) {
    top: 20px;
    left: 16px;
    transform: translateY(6px) rotate(-45deg);
    width: 55%;
  }
  .openbtn1.active span:nth-of-type(2){
    top: 32px;
    left: 16px;
    transform: translateY(-6px) rotate(45deg);
    width: 55%;
  }
    #g-nav{
      width: 100%;
      height: 100vh;
      background: #fff;
      transition: all 0.3s;
      display: block;
      position: fixed;
      top: 0;
      left: 0;
      background-color: #FFFFFF;
      text-align: center;
      z-index: -1;
    }
  /*アクティブクラスがついたら透過なしにして最前面へ*/
  #g-nav.panelactive{
    opacity: 1;
    z-index:999;
  }
  /*ナビゲーションの縦スクロール*/
  #g-nav.panelactive #g-nav-list{
      /*ナビの数が増えた場合縦スクロール*/
      position: fixed;
      z-index: 999; 
      width: 100%;
      height: 100vh;/*表示する高さ*/
      overflow: auto;
      -webkit-overflow-scrolling: touch;
  }
  /*ナビゲーション*/
  #g-nav ul {
      display: none;
      /*ナビゲーション天地中央揃え*/
      position: absolute;
      z-index: 999;
      left:50%;
      transform: translate(-50%,-50%);
      padding-top: 376px;
  }
  #g-nav.panelactive ul {
      display: block;
  }

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

試したこと・調べたこと

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

上記の詳細・結果

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

補足

特になし

Comments

[Lhankor_Mhy]

JavaScript を使っているかと思いますので、そちらをご提示いただけますか？

[Lhankor_Mhy]

質問の変更を拝読。

ご提示のコードを試してみましたが、クリックをすると反応がありました。ですので、問題が再現しませんでした。
ご提示いただいていない部分に原因があるかと思います。
（たとえばjQueryを読み込んでいないなど）

[sususuzu]

jqueryも同じように読み込んでいるのですが、記述する箇所が違うのでしょうか。
html,css,jsをcode penに入力してみましたが、そちらでも反応ありませんでした…

[Refrain]

コードを全て記載ください。
例えばjQueryを最後に読み込んだ結果、ライブラリ未導入状態で動作させてしまうケースもあります。

[Lhankor_Mhy]

CodePen にコピペしてみたものがこちらです。
https://codepen.io/lhankor_mhy/pen/JjVrXQz
こちらも動きませんか？

[sususuzu]

コメントありがとうございます。
試してみたところ、ハンバーガーメニュー自体は動き、バツ印に変わるようになりました！
ありがとうございます。

しかし、他に書いたjsの記述が機能しなくなりました…

[Lhankor_Mhy]

ご解決されて何よりです。

お手数ですが、自己解決の処理をお願いします。

[sususuzu]

ありがとうございます。

その部分に関してはまたいろいろ試してみようと思います。

[m.ts10806]

質問が「受付中」のままになっています。
解決されたのでしたら何かしらの方法で解決済みにしてください（自己解決でもOK）
https://teratail.com/help#resolve-myself
https://teratail.com/help/question-tips#questionTips4

[sususuzu]

m.ts10806様

ログインができず、コメント返信できず大変失礼いたしました。
解決済みにしておきます。ご迷惑をおかけして申し訳ございません。

Answer 1

コードを再度入力すると解決しました