ハンバーガーメニューがリンククリック後，閉じない件について

前提・実現したいこと

JQuery 3x系でハンバーガーメニューとスムーススクロールを作成していますが、リンククリック後にメニューが閉じるようにしたいのです。ご教授お願い致します。

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

メニューが展開はされるが閉じない。> 引用テキスト

該当のソースコード

html
1<header>
2  <h1><a href="index.html">サイトタイトル</a></h1>
3  <div class="menu-trigger" href=""> <span></span><span></span><span></span></div>
4  <nav class="gnav">
5    <ul>
6      <li><a href="#info">INFOMATION</a></li>
7      <li><a href="#main">MAIN</a></li>
8      <li><a href="#link">BOOKMARK</a></li>
9      <li><a href="#contact">MAIL</a></li>
10      <li><a href="#aboutlink">ABOUTLINK</a></li>
11    </ul>
12  </nav>
13  <div class="overlay"></div>
14</header>

javascript
1///script///
2
3$(function () {
4    $('.menu-trigger').on('click', function () {
5        if ($(this).hasClass('active')) {
6            $(this).removeClass('active');
7            $('nav').removeClass('open');
8            $('.overlay').removeClass('open');
9        } else {
10            $(this).addClass('active');
11            $('nav').addClass('open');
12            $('.overlay').addClass('open');
13        }
14    });
15    $('.overlay').on('click', function () {
16        if ($(this).hasClass('open')) {
17            $(this).removeClass('open');
18            $('.menu-trigger').removeClass('active');
19            $('nav').removeClass('open');
20        }
21    });
22});
23$(function () {
24    var showFlag = false;
25    var topBtn = $('#page-top');
26    topBtn.css('bottom', '-100px');
27    var showFlag = false;
28    $(window).scroll(function () {
29        if ($(this).scrollTop() > 100) {
30            if (showFlag == false) {
31                showFlag = true;
32                topBtn.stop().animate({
33                    'bottom': '20px'
34                }, 200);
35            }
36        } else {
37            if (showFlag) {
38                showFlag = false;
39                topBtn.stop().animate({
40                    'bottom': '-100px'
41                }, 200);
42            }
43        }
44    });
45    topBtn.click(function () {
46        $('body,html').animate({
47            scrollTop: 0
48        }, 500);
49        return false;
50    });
51});
52
53$(function () {
54    $('a[href^="#"]').click(function () {
55        var speed = 500;
56        var href = $(this).attr("href");
57        var target = $(href == "#" || href == "" ? 'html' : href);
58        var position = target.offset().top;
59        $("html, body").animate({
60            scrollTop: position
61        }, speed, "swing");
62        return false;
63    });
64});
65///ここまで///

行動規範の内容に同意します

回答1件

ベストアンサー

ソースを見る限り多分あちこちからスクリプトを集めてきて、切り張りして勉強しながら作ってらっしゃる最中なんだと思います。

今回はハンバーガーメニューをクリックして開いたメニューのリンクをクリックした際にハンバーガーメニューが自動的に閉じて欲しいという事だと思いますので、

jQuery
1$(function () {
2    $('a[href^="#"]').click(function () {
3        var speed = 500;
4        var href = $(this).attr("href");
5        var target = $(href == "#" || href == "" ? 'html' : href);
6        var position = target.offset().top;
7        $("html, body").animate({
8            scrollTop: position
9        }, speed, "swing");
10        return false;
11    });
12});

この部分が修正が必要な個所になります。

ここがリンクをクリックした際に実行されるスクリプトで、ここにハンバーガーメニューを閉じるための記述がないために閉じる動作が発生していない状態なので、

jQuery
1$(function () {
2    $('a[href^="#"]').click(function () {
3        var speed = 500;
4        var href = $(this).attr("href");
5        var target = $(href == "#" || href == "" ? 'html' : href);
6        var position = target.offset().top;
7
8        $('.menu-trigger').click(); // これを追加
9
10        $("html, body").animate({
11            scrollTop: position
12        }, speed, "swing");
13        return false;
14    });
15});

スムーススクロールする前にメニューを閉じる命令（menu-triggerのクリック）を記述するのが一番簡単です。

ただ、ページ内にコンテンツ（#付のリンクを含む）を入れて試してみるとわかりますが、この方法だとページ内の#付リンクをクリックしたときにも同様の動作が発生してしまい、ハンバーガーメニューが開いてからスクロールするという動作が発生します。

となると、リンクをクリックした際には「閉じる」という命令を明確に送る方が良いのですが、今の記述だと必ず「閉じる」という命令は用意されていません。

スクリプトの最初に書いてあるようなクラスを外す処理をそのまま書いても良いですが煩雑になりますので

jQuery
1$(function () {
2	var hamburger_menu = $('.menu-trigger');
3	var nav = $('nav');
4	var overlay = $('.overlay');
5	
6	var menu_close = function(){
7		hamburger_menu.removeClass('active');
8		nav.removeClass('open');
9		overlay.removeClass('open');
10	};
11	
12	var menu_open = function(){
13		hamburger_menu.addClass('active');
14		nav.addClass('open');
15		overlay.addClass('open');
16	};
17	
18	hamburger_menu.on('click', function () {
19		if ($(this).hasClass('active')) {
20			menu_close();
21		} else {
22			menu_open();
23		}
24	});
25	
26	overlay.on('click', function () {
27		if ($(this).hasClass('open')) {
28			menu_close();
29		}
30	});
31	
32	$('a[href^="#"]').click(function () {
33		var speed = 500;
34		var href = $(this).attr("href");
35		var target = $(href == "#" || href == "" ? 'html' : href);
36		var position = target.offset().top;
37		
38		menu_close();
39		
40		$("html, body").animate({
41			scrollTop: position
42		}, speed, "swing");
43		return false;
44	});
45});
46