バーガーメニューのページ内遷移で閉じたい

スマホ用にバーガーメニューを入れたのですがページ内遷移の時スクロールして移動するのですがメニューが開いたままになってしまいます。
移動するときにメニューを閉じたいのですがどの様にすればいいのでしょうか？
ご教授お願いいたします。

html
1<!doctype html>
2<html>
3<head>
4<meta charset="UTF-8">
5<title>無題ドキュメント</title>
6  <style>
7  .nav_container {
8	position: fixed;
9	top: 0;
10	width: 100%;
11	height: 50px;
12	z-index: 19;
13  background-color: #61a951;
14}
15.menu-trigger, .menu-trigger span {
16	display: inline-block;
17	transition: all .4s;
18	box-sizing: border-box;
19	cursor : pointer;
20}
21.menu-trigger {
22	position: fixed;
23	top: -5px;
24	right: 10px;
25	width: 35px;
26	height: 56px;
27	z-index: 20;
28}
29.menu-trigger span {
30	position: absolute;
31	background: #fff;
32	width: 35px;
33	height: 2px;
34	margin: auto;
35}
36.menu-trigger span:nth-of-type(1) {
37	top: 15px;
38}
39.menu-trigger span:nth-of-type(2) {
40	top: 0;
41	bottom: 0;
42}
43.menu-trigger span:nth-of-type(3) {
44	bottom: 15px;
45}
46.menu-trigger.active span:nth-of-type(1) {
47	-webkit-transform: translateY(12px) rotate(-45deg);
48	transform: translateY(12px) rotate(-45deg);
49}
50.menu-trigger.active span:nth-of-type(2) {
51	opacity: 0;
52}
53.menu-trigger.active span:nth-of-type(3) {
54	-webkit-transform: translateY(-12px) rotate(45deg);
55	transform: translateY(-12px) rotate(45deg);
56}
57.g-nav {
58	display: none;
59	position: fixed;
60	top: 0;
61	right: 0;
62	background:#ccc;
63	width: 100%;
64	height: 80%;
65	opacity: .98;
66	z-index: 10;
67}
68.list {
69	padding: 0px;
70	width: 80%;
71	margin: 10px auto;
72  margin-top: 10px;
73  list-style: none;
74	overflow-y: scroll;
75	 -webkit-overflow-scrolling: touch;
76}
77.list .item {
78	border-bottom: 1px solid #000;
79}
80.item a {
81	display: block;
82	text-decoration: none;
83	color: #000;
84	padding: 25px 0 5px;
85	font-size: 1rem;
86	font-weight: 900;
87}
88.cont{
89  width:100vw;
90  height:1000px;
91}
92  </style>
93  
94  
95<script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
96  <script>
97    $(function(){
98      $('.menu-trigger').on('click',function(){
99        $(this).toggleClass('active');
100        $('.g-nav').slideToggle();
101      });
102    });
103  </script>
104</head>
105
106<body>
107  <div class="nav_container">
108    <a class="menu-trigger"> <span></span> <span></span> <span></span> </a>
109    <nav class="g-nav">
110      <ul class="list">
111        <li class="item"><a href="#content_first">コンテンツ１</a></li>
112        <li class="item"><a href="#content_second">コンテンツ２</a></li>
113        <li class="item"><a href="#content_third">コンテンツ３</a></li>
114        <li class="item"><a href="#content_fourth">コンテンツ４</a></li>
115      </ul>
116    </nav>
117  </div>
118  <div id="content_first"  class="cont">コンテンツ１
119  </div>
120  <div id="content_second"  class="cont">コンテンツ2
121  </div>
122  <div id="content_third"  class="cont">コンテンツ3
123  </div>
124  <div id="content_fourth" class="cont">コンテンツ4
125  </div>
126</body>
127</html>

kei344

2017/12/13 17:18

プラグイン／ライブラリは公式配布サイトのURLを質問文に追記ください。（URLにはリンクを張ることができます）

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

回答1件

ベストアンサー

下記ページの「その他の返信（2件）を表示」を押すと回答が出てきます。

【ページ内リンク時、ドロワーメニューを閉じるには？ - 「drawer」http://g... - Yahoo!知恵袋】
https://detail.chiebukuro.yahoo.co.jp/qa/question_detail/q11158073326

投稿2017/12/13 17:29

kei344

総合スコア69407

KEJ

2017/12/13 18:24

すみません。使用しているものを勘違いしていました。質問を修正しましたので何卒ご教授願いいたします。

kei344

2017/12/13 18:28

やり方は変わらないですよ。クリックイベントを拾って閉じればよいです。

KEJ

2017/12/13 18:58

いつも教えてくださってありがとうございます。 $(document).ready(function() { $('.list li').on('click', function() { $(this).toggleClass('active'); $('.g-nav').slideToggle(); }); }); を追加したら閉じる様になったのですがリンクでメニューを閉じた時トリガーの×が三本線に戻らないのですがそれはどの様に記述したら良いのかご教授お願いいたします。

kei344

2017/12/13 19:03

× $(this).toggleClass('active'); ○ $('.menu-trigger').removeClass('active'); でどうでしょう。

KEJ

2017/12/13 19:11

出来ました！いつも本当にありがとうございます。

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