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

Question

前提・実現したいこと

ハンバーガーメニューのページ内リンクをクリックすると、ハンバーガーメニューが閉じるようにしたいです。
過去の同様の質問を見ながら自分で書いてみたのですが、リンクをクリックしても閉じません。

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

エラーメッセージ

該当のソースコード

<p class="humbergerBtn open"><span class="fas fa-stream fa-2x"></span></p>
<p class="humbergerBtn close"><span class="fas fa-times fa-3x"></span></p>

<nav class="humberger">
	<ul class="humbergerUl">
		<li><a href="#about"><i class="fas fa-sm fa-feather-alt"></i> <span>A</span>BOUT</a></li>
		<li><a href="#news"><i class="fas fa-sm fa-feather-alt"></i> <span>N</span>EWS</a></li>
		<li><a href="#service"><i class="fas fa-sm fa-feather-alt"></i> <span>S</span>ERVICE</a></li>
		<li><a href="#contact"><i class="fas fa-sm fa-feather-alt"></i> <span>C</span>ONTACT</a></li>
		<li><a href="#company"><i class="fas fa-sm fa-feather-alt"></i> <span>C</span>OMPANY</a></li>
	</ul>
</nav>

.open, .close {
  margin-right: 20px;
	display: none;
}

.humberger {
	position: fixed;
  z-index: 20;
	top: 100px;
	transform: translateY(-200%);
	transition: all 1s;
	width: 100%;
	background-color: #FFFFFF;
}

nav.humberger a {
	border-bottom: solid 1px #ebebec;
}

nav.humberger li {
  height: 50px;
  line-height: 50px;
}

nav.humberger li a {
	display: block;
  text-align: center;
}

nav.humberger.active {
	transform: translateY(0%);
}

 /* スマホ向けレイアウト */
 @media all and (max-width: 800px) {

  header {align-items: center;}
  .header-menu {display: none;}
  .open {display: block;}
  .open.active {display: none;}
  .close.active {display: block;}


}

		$(function() {
		    $('.humbergerBtn').click(function() {
		        $(this).toggleClass('active');
		        if ($(this).hasClass('active')) {
		            $('.humberger').addClass('active');
								$('body').addClass('overflowHidden');
								$('.open').addClass('active');
								$('.close').addClass('active');
		        } else {
		            $('.humberger').removeClass('active');
								$('.open').removeClass('active');
								$('.close').removeClass('active');
		            $('body').removeClass('overflowHidden');
		        }
					});

				$('.humberger a').click(function() {
					$('.humbergerBtn').trigger('click');
		});


	});

試したこと

ソースに記載しているように、過去の同様の質問を見ながら、下記を追記してみましたが、何も変わりませんでした・・・。
$('.humberger a').click(function() {
$('.humbergerBtn').trigger('click');
});
探り探りで作っている状況で、勉強不足でお恥ずかしいですが、どこがおかしいのかご教授いただけるとありがたいです。

Answer 1

原因、解決策、原因を見つけた方法、その他気になった点について、回答します。

原因

ハンバーガーメニューのページ内リンクをクリックした際に、ハンバーガーメニューが閉じない原因についてです。
質問者さんが「試したこと」で追記した下記のコードにより、 .humbergerBtn というクラス名のついた要素に対してクリックイベントが実行されるようになりますが、

    $('.humberger a').click(function () {
        $('.humbergerBtn').trigger('click');
    });

ここで問題になるのが、 .humbergerBtn というクラス名を持つ要素が下記の２つあるということです。

        <p class="humbergerBtn open"><span class="fas fa-stream fa-2x"></span></p>
        <p class="humbergerBtn close"><span class="fas fa-times fa-3x"></span></p>

その為、クリックイベントが２回実行されてしまい、.active クラスを外したのに、すぐにまた .active クラスが付けられて、結果的にハンバーガーメニューが閉じない状態になっています。

解決策

いくつか解決策あるかもしれませんが、一番手っ取り早い解決策は、下記のように .open もしくは .close を追記して、一つの要素に対してクリックイベントが実行されるようにすることです。

    $('.humberger a').click(function () {
        $('.humbergerBtn.open').trigger('click');  // .open もしくは .close を追記する
    });

原因を見つけた方法

原因と解決策だけだと自走力がつかないので、原因を見つけた方法についてもお伝えしておきます。
JavaScriptで意図した通りに動かないというような場合、console.log()メソッドで、ログを出力してみてください。
（Chrome開発者ツールのコンソールタブ（Console）に出力される）
そうすることで、呼び出しているはずの関数が実際に呼び出されてるのか、変数に意図したものが入っているのか、ということを確認できます。

今回の場合、下記のように、.humbergerBtn のクリック時に実行される関数内に、console.log()を仕込みました。
その結果、ハンバーガーメニューのページ内リンクをクリックした際に、ログが２回出力されたので、関数が２回実行されてることに気づきました。

    $('.humbergerBtn').click(function () {
        // 下記のようにログに出してみる
        console.log('*** .humbergerBtn がクリックされた。***');
        console.log('    this: ', this);
        console.log('    this.classList: ', this.classList);

        $(this).toggleClass('active');
        if ($(this).hasClass('active')) {
            $('.humberger').addClass('active');
            $('body').addClass('overflowHidden');
            $('.open').addClass('active');
            $('.close').addClass('active');
        } else {
            $('.humberger').removeClass('active');
            $('.open').removeClass('active');
            $('.close').removeClass('active');
            $('body').removeClass('overflowHidden');
        }

デバッグ方法は色々あると思いますが、ログに出力してみるのは有効な方法の一つですので、今後何か詰まった際に試してみてください（^^)b

その他気になった点

• ハンバーガーのスペルが違う（誤: humberger　、正: hamburger）
• 貼っていただいた css や JS のコードのインデントが揃っていない

　　　　=> Mac で vscode 使ってる場合は　alt+shift+F でフォーマットを綺麗にできます。

---

以上、うまくいくよう願っています。
ファイトです！！

Comments

[ringo5656]

どうもありがとうございます！
humbergerBtnだとクラスを2つもっているとのこと、そういうことだったのかと気づけました！
また、console logを検証ツールで使ったことがなかったため、大変勉強になりました。今まで動かないときにどう探せばいいのか全くわからず、ただコードを眺めるだけだったので、本当にありがたいです。
スペルミスお恥ずかしいです…インデントもきちんと揃えるように致します。
本当にありがとうございました。

Answer 2

ソースの記述が大変わかりづらかったため、別途質問させていただきます。