ハンバーガーメニュー内リンククリック時にリンク先に遷移かつメニューを閉じる方法を教えてください。

Question

前提・実現したいこと

コーディング初心者です。説明、記述に不慣れ、不備があるかと思いますがよろしくお願いいたします。

imgで挿入したハンバーガーメニューをクリックし、開いた中にあるリンクをクリックした場合、
リンク先に遷移、かつメニューを閉じたいです。

発生している問題・エラーメッセージ

今は、クリック後に遷移はしますが、メニューが閉じず、開いたままです。

クリックしているのは、ここです。

<li><a href="#concept">TSUTSUMUについて<span>What We Hope</span></a></li> <li><a href="#business">事業について<span>What We Do</span></a></li> <li><a href="#members">メンバー紹介<span>Members</span></a></li> <li><a href="#recruit">募集職種<span>Careers</span></a></li> <li><a href="#benefits">働く環境<span>Benefits</span></a></li>

該当のソースコード｜JavaScript

JavaScript

$(function(){
$('.humbergarmenu').on('click', function(){
$('.in-humbergarmenu').toggleClass('is-active');
});

});

$(function() {
$('#concept a[href]').on('click', function(event) {
$('.in-humbergarmenu').trigger('click');
});
});

該当のソースコード｜html

<div class="sp-only"> <div class="humbergarmenu"> <a href="#"> <img src="assets/images/Humbergar-menu.png"> </a> </div> </div> </div>

<div class="in-humbergarmenu">
    <div class="gnav-pc-wrap">
        <ul class="gnav-pc">
          <li><a href="#concept">TSUTSUMUについて<span>What We Hope</span></a></li>
          <li><a href="#business">事業について<span>What We Do</span></a></li>
          <li><a href="#members">メンバー紹介<span>Members</span></a></li>
          <li><a href="#recruit">募集職種<span>Careers</span></a></li>
          <li><a href="#benefits">働く環境<span>Benefits</span></a></li>
        </ul>
    <div class="gnav-pc-button">
        <a class="button-small" href="">ENTRY</a>
    </div>
    </div>
    </div>

該当のソースコード｜CSS

/*----------------------------

• メニュー開閉ボタン

----------------------------/

.humbergarmenu{
display: block;
text-align: center;
}

/*----------------------------

• メニュー本体

----------------------------/
.in-humbergarmenu{
margin-top: 78px;
position: fixed;
top: 30px;
right: 0;
z-index: 1;
width: 100vw;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background: #ffffff;
}

/*----------------------------

• アニメーション部分

----------------------------/

/* アニメーション前のメニューの状態 /
.in-humbergarmenu{
pointer-events: none;
opacity: 0;
transition: opacity .3s linear;
}
/ アニメーション後のメニューの状態 */
.in-humbergarmenu.is-active{
pointer-events: auto;
opacity: 1;
}

試したこと

ネット検索でいくつかJSの記述を試しました。が、効きませんでした。
（

①$('#concept a[href]').on('click', function(event) {
$('#concept').trigger('click');
});

② $('#concept a[href]').on('click', function(event) {
$('.in-humbergarmenu').trigger('click');
});
などです。

初心者のため、検討外れなJSを探してきているのかもしれないです。
アドバイスのほど、何卒よろしくお願いいたします。

Answer 1

セレクタが間違っています。
ご希望のことは、
.gnav-pc内のaリンク(.gnav-pc a)をクリックしたとき、メニューを閉じたい(=.humbergarmenuをクリックしたことにする)
ということですから、下記でどうでしょう。

$(function(){
  $('.humbergarmenu').on('click', function(){
    $('.in-humbergarmenu').toggleClass('is-active');
  });

  $('.gnav-pc a').on('click', function(event) {
    $('.humbergarmenu').trigger('click');
  });
});

あるいは、ハンバーガーとリンクのクリックをまとめてしまってもいいですね。

$(function(){
  $('.humbergarmenu, .gnav-pc a').on('click', function(){
    $('.in-humbergarmenu').toggleClass('is-active');
  });
});

Comments

[suemeal125]

hatena19様

アドバイス、ありがとうございます。1つ目の記述で解決できました(Ｔ＿Ｔ)1つずつのリンクにJSを付けないといけないと思い込んで、gnav-pc aの部分だと思い付いてもいませんでした。分かりやすいアドバイス、ありがとうございました！