ハンバーガーメニューのページ内リンクをクリックしてもメニューが閉じない

実現したいこと

ハンバーガーメニューのページ内リンクをクリックしたら
メニューが閉じて該当箇所に飛ぶ

前提

【現状】
ハンバーガーメニュー内のリンクをクリックとすると該当箇所まで移動はしますが、ハンバーガーメニューが開いたままです。

【やりたい事】
ハンバーガーメニュー内のリンクをクリックで該当箇所まで移動と同時にハンバーガーメニューを閉じたいです。

【試したこと】
類似した質問を調べて試してみましたが、ハンバーガーメニューが開けなかったりしました。
JS初心者の為、よろしくお願いいたします。

該当のソースコード

HTML
 <header class="p-header js-header">
    <div class="p-header__inner l-inner">
      <h1 class="p-header__logo">
        <a href="#" class="p-header__logo-link">
          <img src="./images/header-logo.svg" alt="ロゴ">
        </a>
      </h1>
      <!--ハンバーガーアイコン -->
      <button class="p-header__hamburger c-hamburger js-hamburger u-mobile">
        <span></span>
        <span></span>
        <span></span>
      </button>
  </header>
  <!--ハンバーガーアイコンクリックすると出でくるメニュー-->
  <div class="p-header__drawer-menu  c-drawer-menu js-drawer-menu u-mobile">
    <div class="c-drawer-menu__inner l-inner">
      <h1 class="c-drawer-menu__logo u-mobile">
        <a href="./index.html" class="c-drawer-menu__logo-link">
          <img src="./images/header-logo.svg" alt="ロゴ">
        </a>
      </h1><!-- /c-drawer-menu__logo -->
      <ul class="c-drawer-menu__items">
        <li class="c-drawer-menu__item"><a href="#customers">導入企業</a></li>
        <li class="c-drawer-menu__item"><a href="#problem">お悩み</a></li>
        <li class="c-drawer-menu__item"><a href="#feature">特徴</a></li>
        <li class="c-drawer-menu__item"><a href="#price">料金プラン</a></li>
        <li class="c-drawer-menu__item"><a href="#faq">よくある質問</a></li>
      </ul>
      <ul class="c-drawer-menu__btns">
        <li class="c-drawer-menu__item"><a class="c-btn1--small" data-en="Download" href="#">資料請求</a></li>
        <li class="c-drawer-menu__item"><a class="c-btn2--small" data-en="Trial" href="#">無料お試し</a></li>
      </ul>
    </div>
  </div>

css
1.p-header {
2  width: 100%;
3  background-color: $white;
4  position: fixed;
5  z-index: 9999;
6  height: rem(100);
7  border-bottom: rem(1) solid rgb(0 0 0 / .1);
8  @include mq("md") {
9  }
10}
11
12.p-header__inner.l-inner {
13  max-width: rem(1440);
14  display: flex;
15  align-items: center;
16  justify-content: flex-end;
17  height: inherit;
18  padding-right: rem(20);
19  padding-left: rem(20);
20  @include mq("md") {
21    justify-content: space-between;
22    padding-left: rem(37);
23  }
24}
25
26.p-header__logo {
27  display: none;
28  @include mq("md") {
29    display: block;
30    width: rem(157);
31    margin-right: rem(32);
32  }
33}
34
35.p-header__pc-nav {
36    height: inherit;
37}
38
39.p-header__drawer-menu {
40  width: 100%;
41  height: 100vh;
42}
43
44.change-color {
45  background-color: transparent;
46  border-bottom: none;
47}

js
1jQuery(function ($) {
2
3 // ハンバーガーメニュー (p-header)
4  $('.js-hamburger').on('click', function () {
5    if ($('.js-hamburger').hasClass('is-open')) {
6      $('.js-drawer-menu').fadeOut();
7      $(this).removeClass('is-open');
8    } else {
9      $('.js-drawer-menu').fadeIn();
10      $(this).addClass('is-open');
11    }
12  });
13
14 // ハンバーガーメニューをクリックしたら背景が変わる
15$('.js-hamburger').on('click', function(){
16  $('.p-header').toggleClass('change-color');
17});
18
19});

試したこと

過去の質問などを参考にコードを書き直したりしましたが解決できませんでした。

お手数おかけしますがよろしくお願いいたします。

行動規範の内容に同意します

回答1件

ベストアンサー

質問欄の該当のソースコードはコピペだけでは動かせなかったので間違っているかもしれませんが、
回答してみますね。
(できたら該当のソースコードはコピペするだけで再現確認できるようになっていると助かります)
// ---のところにコードを追加してみました。

js
1jQuery(function ($) {
2
3 // ハンバーガーメニュー (p-header)
4  $('.js-hamburger').on('click', function () {
5    if ($('.js-hamburger').hasClass('is-open')) {
6      $('.js-drawer-menu').fadeOut();
7      $(this).removeClass('is-open');
8    } else {
9      $('.js-drawer-menu').fadeIn();
10      $(this).addClass('is-open');
11    }
12  });
13
14 // ハンバーガーメニューをクリックしたら背景が変わる
15$('.js-hamburger').on('click', function(){
16  $('.p-header').toggleClass('change-color');
17});
18
19  // --- ハンバガーメニューのリンクをクリックしたらハンバーガーメニューを閉じます。
20  $('.c-drawer-menu__item > a').on('click', function () {
21    $('.js-drawer-menu').fadeOut();
22    $(this).removeClass('is-open');
23  })
24
25});