ページ内リンクに遷移した際に、ハンバーガーメニューを閉じたい

#ハンバーガーメニュー #ページ内リンクに遷移した際にドロワーメニューが消えるようにしたい

下記のjavascriptとCSSを使用して、ハンバーガを開くとブラウザ全体にドロワーメニューが広がるよう実装しました。
しかし、ページ内リンクで遷移した際にドロワーメニューが残ったままになってしまいます。

どなたかご教授いただけないでしょうか。
よろしくお願いいたします。

HTML
1<header id="headerTop" class="site-header">
2 <nav id="globalNav" class="navigation">
3    <h1><a href="../index.html"><img src="../img/top/logo.png"  alt=""></a></h1>		
4  <div id="nav_toggle">
5	<div>
6	  <span></span>
7	  <span></span>
8 	  <span></span>
9	</div>
10  </div>
11		
12  <div id="nav">
13	<ul class="nav-contents">
14	 <li class="nav-item"><a href="../index.html">home</a></li>
15	 <li class="nav-item"><a href="../aboutus/index.html">about us</a></li>
16	 <li class="nav-item"><a class="nav_pro">product</a></li> 
17	 <li class="nav-item"><a href="../index.html#info">info</a></li>
18	 <li class="nav-item"><a href="../index.html#contact">contact</a></li>
19       </ul>
20   </div>
21 </nav>
22</header>

CSS
1Nav{
2	width: 100%;
3	display: -webkit-flex;
4    display: flex;
5    -webkit-justify-content: space-between;
6    justify-content: space-between;
7	}
8	
9Nav ul{
10	display: block;
11	}
12
13Nav ul{
14	padding: 0;
15	}
16
17#globalNav ul li a{
18	padding: 0;
19	width: 100%;
20	}
21		
22#nav{
23	display: none;
24	position: absolute;
25	top:0;
26	width: 100%;
27	height: 100vh;
28	background: rgba(255,255,255,0.6);
29	left: 0;
30	}
31	
32header #nav ul{
33		display: block;
34		width: 100%;
35		height: 350px;
36		position: absolute;
37		top: 0px;
38		right: 0px;
39		bottom: 0px;
40		left: 0px;
41		margin: auto;
42	        }
43header #nav ul li{
44		text-align: center;
45	        }
46header #nav ul li:last-child{
47		border: none;
48	}
49header #nav ul li a{
50		display: block; 
51		color: #333;
52	}
53	
54/*開閉ボタン*/
55#nav_toggle{
56		display: block;
57		width: 40px;
58		height: 40px;
59		position: relative;
60		top: 20px;
61		right: 30px;
62		z-index: 99999;
63	}
64	
65#nav_toggle div {
66		position: relative;
67	}
68	
69#nav_toggle span{
70		display: block;
71		height: 3px;
72		background: #fff;
73		position:absolute;
74		width: 100%;
75		left: 0;
76		-webkit-transition: 0.5s ease-in-out;
77		-moz-transition: 0.5s ease-in-out;
78		transition: 0.5s ease-in-out;	
79	}
80	
81#nav_toggle span:nth-child(1){
82		top:0px;
83	}
84#nav_toggle span:nth-child(2){
85		top:12px;
86	}
87#nav_toggle span:nth-child(3){
88		top:24px;
89	}
90	
91/*開閉ボタンopen時*/
92.open #nav_toggle span:nth-child(1) {
93			top: 12px;
94		   -webkit-transform: rotate(135deg);
95			-moz-transform: rotate(135deg);
96			transform: rotate(135deg);
97		}
98.open #nav_toggle span:nth-child(2) {
99			width: 0;
100			left: 50%;
101		}
102.open #nav_toggle span:nth-child(3) {
103			top: 12px;
104			-webkit-transform: rotate(-135deg);
105			-moz-transform: rotate(-135deg);
106			transform: rotate(-135deg);
107		}	
108

JS
1$(function(){
2			$('#nav_toggle').click(function(){
3						$("header").toggleClass('open');
4				$("#nav").fadeToggle(500);
5					});			
6		});

回答1件

これでどうでしょう。

js
1$('#nav a').click( function(){
2    $('#nav_toggle').trigger( 'click' );
3} );

投稿2019/04/03 13:33

kei344

総合スコア69098

回答へのコメント

akipecology

2019/04/03 16:25

ご返信ありがとうございます。そのように記述したところハンバーガーが開かなくなってしまいました汗代わりに下記のように記述を変更したところページ内リンクでも閉じるようになりましたが、今度は左上のロゴにタッチしてもドロワーメニューが表示されるようになってしまいました。どのように修正すれば良いでしょうか。 $(function(){ $('#nav_toggle').click(function(){ $("header").toggleClass('open'); $("#nav").fadeToggle(500); }); $('nav ul li a').on('click', function(){ if (window.innerWidth <= 768) { $('#nav_toggle').click(); } });

kei344

2019/04/03 16:35

https://jsfiddle.net/g34wnbqo/ こちらで提示したコードでほぼ動きますね。提示されたコードにページ内リンク（<a href="#">←こういうの）は無かったので追加しました。ページ内リンクの作り方を間違えている可能性はあると思います。

kei344

2019/04/03 16:38

というか、別ページに行った時のことであれば、そもそも開いていることが問題なので、そこのコードを変える必要があります。 ※ ../index.html#contact は、「一つ下の階層のindex.htmlのidがcontact の箇所」へのリンクです

akipecology

2019/04/05 02:19

@kei344 ご返信誠にありがとうございます！申し訳ございません。貼り付けたHTMLのソースが、下層ページ（prouctページ）のものでした。大変失礼いたしました。 topページのHTMLは下記のように記述しております。 <header id="headerTop" class="site-header"> <nav id="globalNav" class="navigation"> <h1><a href="#mainVisual"><img src="img.png" alt=""></a></h1> <div id="nav_toggle"> <div> <span></span> <span></span> <span></span> </div> </div> <div id="nav"> <ul class="nav-contents"> <li class="nav-item"><a href="#mainVisual" class="nav_home">home</a></li> <li class="nav-item"><a href="aboutus/index.html">about us</a></li> <li class="nav-item"><a href="products/index.html">product</a></li> <li class="nav-item"><a href="#info">info</a></li> <li class="nav-item"><a href="#contact">contact</a></li> </ul> </div> </nav> </header>

akipecology

2019/04/05 02:24

現在、ご提示いただいたjsを記述してあるのですが、 SP版のハンバーガーメニューは、ほぼ正常に動きます。ですが、PC版のグローバルナビゲーションの動きがおかしくなってしまいました。 topページで、グローバルナビゲーションのページ内リンク（”info”と”contact”）をクリックすると、他の項目（"home","about","product"も全て消えてしまいます。どのように対応すれば良いでしょうか。ご多忙中大変恐縮ですがご教示いただけると幸いです。

kei344

2019/04/05 02:27

ほかのJavaScriptがあるのでは。