ページ内リンクでハンバーガーメニューが閉じる様にしたい！！

Question

前提・実現したいこと

ページ内リンクでハンバーガーメニューが閉じる様にしたい！！

ハンバーガーメニューをなんとか完成させたと思ったのですが、
ページ内のリンクを設定してみたところハンバーガーメニューが閉じない不具合が発生しました。
jQueryのコードが足りていないのかとは思いながらも
何を書き足せば解決できるのか悩みあらゆるコードを書いてみましたが解決できませんでした。
お力をお借りできますと幸甚です。

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

ページ内リンクでハンバーガーメニューが閉じない。
jQueryに足りない言葉・問題があるかと思っております。

該当のソースコード

<nav class="menu_nav">
<ul>
<li><a href="#a">トップ</a></li>
<li><a href="#b">ブランド</a></li>
<li><a href="#c">ニュース</a></li>
<li><a href="#d">会社案内</a></li>
<li><a href="#e">お問い合わせ</a></li>
</ul>
</nav>


<div class="menu_toggle">
<span class="toggle-span"></span>
<span></span>
<span></span>
</div>

試したこと

下記のjQueryなどを試していました。

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

Answer 1

jQuery難しいですよね(´ω｀)私も結構詰まりました。
でも分かるようになったら簡単になってくるので、正解は書かずに、糸口だけ載せようと思います。

jQueryの記述は

$( セレクタ ).メソッド ( パラメータ );

です。すごくざっくばらんに言うと

$('今回確認するもの').が('ほにゃららになった時', 下記を実行してね() {
   実行内容;
});

みたいな感じです。(onとかやfunction(hoge)の説明は割愛)
実行内容のところは最初の今回確認するもの(this)になる場合もあるし別のセレクタを当てはめることも出来ます。
niwacoさんの記述では、

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

ですので、#menu_nav a[href]がclickされた時、発動。.menu_toggleをclickしてください。というようなものになっています。
今のままだと、jQueryは何の動きもしない要素を2回クリックしたことになってます。

行いたい事はハンバーガーメニューを押すと出たり隠れたりすることだと思いますので
・CSSで動かしたい(出てきて欲しい)要素に設定を加える
(左から右に出てきて欲しいならtransform出てくるならdisplayなどで検索すれば出ると思います)
これは下記に出てくる'与えるクラス'も設定する必要があります。

・jQueryの記述を

$('ハンバーガーメニューのボタン').on('click', function() {
  $('ハンバーガーメニューの要素(ul部分)').toggleClass('与えるクラス');
});

などにすると良いかなと思います

長くなってしまいましたが、一概に正解ではないので、色々確認しながら答えを見つけて頂ければ幸いです
頑張って下さい。

Comments

[niwaco]

ありがとうございます！
最初どういうことだろう？と悩んでいましたが、おかげさまでやりたかったことができました
スッキリしました！