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

実現したいこと

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

前提

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

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

【試したこと】
類似した質問を調べて試してみましたが、ハンバーガーメニューが開けなかったりしました。
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});

試したこと

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

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