ページ内リンクのハンバーガーを閉じる実装

Question

ご覧いただき誠にありがとうございます。

当方、https://tivel.jp/archives/11037
こちらのサイトをみて実装いたしました。

制作するサイトがページ内リンクを必須とし、ハンバーガーを選択した際にハンバーガーが開きっぱなしとなってしまいます。
リンク選択時にハンバーガーを閉じる場合どのように改変が必要となりますでしょうか。

ご教示のほどよろしくお願いいたします。

<div class="wrapper">
  <main>
    <h1>ドロワーメニュー</h1>
    <p>コンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツ</p>
  </main>
  <div class="menu-trigger" href="">
    <span></span>
    <span></span>
    <span></span>
  </div>
  <nav>
    <ul>
      <li>MENU</li>
      <li>MENU</li>
      <li>MENU</li>
    </ul>
  </nav>
  <div class="overlay"></div>
</div>

$('.menu-trigger').on('click',function(){
  if($(this).hasClass('active')){
    $(this).removeClass('active');
    $('main').removeClass('open');
    $('nav').removeClass('open');
    $('.overlay').removeClass('open');
  } else {
    $(this).addClass('active');
    $('main').addClass('open');
    $('nav').addClass('open');
    $('.overlay').addClass('open');
  }
});
$('.overlay').on('click',function(){
  if($(this).hasClass('open')){
    $(this).removeClass('open');
    $('.menu-trigger').removeClass('active');
    $('main').removeClass('open');
    $('nav').removeClass('open');      
  }
});

Comments

[kei344]

ご自身で試されたコードを質問文に追記し、「何」が「どのように」わからないのか、コードのどの部分で詰まっているのかなどを具体的に追記されたほうが回答が望めると思います。

[退会済みユーザー]

ご回答いただきまことにありがとうございます。
先ほど登録したばかりでどのようなことを記載して良いかわからずこのような記述方法となってしまいました。
試したといっても、熟知している方からすると畑違いな作業だと思います、、

[kei344]

試したことを提示されないと、ただの作業依頼になり、teratailが推奨していません。質問するときのヒントを読み、質問を改善することをお勧めします。

【質問するときのヒント｜teratail（テラテイル）】
https://teratail.com/help/question-tips

Answer 1

どのように改変が必要

メニュー内の（質問文では提示されていない）a要素のクリックイベントにて、（質問文では提示されていない）$('.menu-trigger')に対して.trigger( 'click' )する。

【.trigger() | jQuery API Documentation】
https://api.jquery.com/trigger/

Comments

[退会済みユーザー]

ご回答いただき誠にありがとうございます。
$('.menu-trigger').on('click',function(){
↓
$('.menu-trigger'). trigger('click',function(){
にするということでしょうか？

先ほど変更してみましたが、ハンバーガーが動作しなくなってしまいました。
jsはあまり詳しくなく、もう少しご教示いただけますと幸いです。
よろしくお願いいたします。

[kei344]

違います。

[kei344]

「メニュー内の（質問文では提示されていない）a要素のクリックイベントにて」と書いているし、triggerのリファレンスも示しているのですが･･･。