【ハンバーガーメニュー】ページ内リンクをクリックで、メニューを閉じたい

Question

【ハンバーガーメニュー】ページ内リンクをクリックで、メニューを閉じたい

実現したいこと：
ハンバーガーメニュー内の各項目をクリックすると、ハンバーガーメニューが閉じるようにしたいです。

現状：
ページ内リンクを設定している箇所（PROFILE）だけ、クリックしてもハンバーガーメニューが閉じません。
同様の質問を参考に試してみましたが、実現できませんでした。

質問：
jsの
①どの箇所に
②どのような記述を
すれば、上記の動作が可能になるでしょうか。

サイト作成自体が初めてのため粗が多いのですが、お教えいただければ幸いです。

該当のソースコード

        <div class="hamburger"><!-- ハンバーガーの３本線-->
          <span></span>
          <span></span>
          <span></span>
        </div>
        <nav class="globalMenuSp"><!-- ハンバーガー内のナビ-->
          <ul class="nav-wrap">
            <li class="li-works">WORKS</li>
              <ul class="works-wrap"><!-- WORKS子カテゴリ -->
                <li><a href="">WEB CONTENTS</a></li>
                <li><a href="">FLYER</a></li>
                <li><a href="">WRITING</a></li>
              </ul>
            <li class="li-profile"><a href="#profile">PROFILE</a></li>
            <li class="li-top"><a href="">TOP</a></li>
          </ul>
        </nav>

/*ここからハンバーガーボタン*/
.hamburger { /*ボタンのベース*/
	display: block;
	position: absolute;
	width: 42px;
	height: 42px;
	z-index: 3;
	cursor: pointer;
}

.hamburger span { /*ボタンの３本線*/
	display: block;
	position: absolute;
	width : 30px;
	height:  1px;
	left  :  6px;
	background: #fff;
	transition: 0.3s ease-in-out;
}

.hamburger span:nth-child(1) {top: 10px;}/* hamburger中の1番目の <span> 要素をtopから10px */
.hamburger span:nth-child(2) {top: 20px;}
.hamburger span:nth-child(3) {top: 30px;}

/* ナビ開いている時のボタン */
.hamburger.active span:nth-child(1){
  background: #fff;
	top: 16px;
	left: 6px;
	transform: rotate(-45deg);
}
.hamburger.active span:nth-child(2),
.hamburger.active span:nth-child(3) {
  background: #fff;
	top: 16px;
	transform: rotate(45deg);
}

/* 70pxスクロールを起点に、このクラスをjQueryで付与・削除する */
.hamburger.change-color span {
  background: #222;
}/*ここまでハンバーガーボタン*/

/*ここからnav*/
nav.globalMenuSp {
  position: fixed;
  z-index : 2;
  top  : 0;
  left : 0;
  text-align: center;
  transform: translateX(100%);
  transition: all 0.6s;
  width: 100%;
  height: 100vh;
}

nav.globalMenuSp .nav-wrap {
  background: rgba(30,30,30,0.95);
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100vh;
  display: -webkit-box;
	display: -ms-flexbox;
	display: flex; /* 要素をflexboxに対応させる */
  align-items: center; /* 縦方向の中央揃え */
  justify-content: center; /* 横方向の中央揃え */
  flex-direction: column; /* 子要素の並びを上から下にする（要素の改行に対応） */
}

/* このクラスを、jQueryで付与・削除する */
nav.globalMenuSp.active {
  transform: translateX(0%);
}

$(function() {	
    $('.hamburger').click(function() {
        $(this).toggleClass('active');
 
        if ($(this).hasClass('active')) {
            $('.globalMenuSp').addClass('active');
        } else {
            $('.globalMenuSp').removeClass('active');
        }
    });
});

Answer 1

<style>
.hamburger:not(.active):after{
content:"\02261";
}
.hamburger.active:after{
content:"\0d7";
}
.hamburger:not(.active) ~ .globalMenuSp{
display:none;
}
</style>
<script>
document.addEventListener('click',e=>{
  const t=e.target;
  if(t.closest('.hamburger')){
    t.classList.toggle('active');
  }
  if(t.closest('.globalMenuSp a') ||
     !t.closest('.globalMenuSp,.hamburger')){
    document.querySelector('.hamburger').classList.remove('active');
  }
});
</script>
<div class="hamburger"></div>
<nav class="globalMenuSp"><!-- ハンバーガー内のナビ-->
  <ul class="nav-wrap">
    <li class="li-works">WORKS</li>
      <ul class="works-wrap"><!-- WORKS子カテゴリ -->
        <li><a href="#content">WEB CONTENTS</a></li>
        <li><a href="#flyer">FLYER</a></li>
        <li><a href="#writing">WRITING</a></li>
      </ul>
    <li class="li-profile"><a href="#profile">PROFILE</a></li>
    <li class="li-top"><a href="#top">TOP</a></li>
  </ul>
</nav>

Answer 2

まず、CSSの下記の部分を

/* このクラスを、jQueryで付与・削除する */
nav.globalMenuSp.active {
  transform: translateX(0%);
}

下記のように修正します。

.hamburger.active + nav.globalMenuSp {
  transform: translateX(0%);
}

+はすぐ後の要素を指定します。
隣接兄弟結合子 - CSS: カスケーディングスタイルシート | MDN

これで、ハンバーガーメニューのみのactiveクラスの付け外しで動作するようになるので、jQueryがシンプルになります。

その上で、ナビのa要素のクリックでも反応するようにjQueryを書き換えればいいでしょう。

$(function() {    
    $('.hamburger, .globalMenuSp a').click(function() {
        $('.hamburger').toggleClass('active');
    });
});

Comments

[napoli_mk]

返信が遅くなり申し訳ありません。
初心者の私でも分かるシンプルな回答で、大変助かりました。
この度はありがとうございました。