ハンバーガーメニューが開いたままになる

ハンバーガーメニューをjQueryで設置した際に、メニューが開きっぱなしになってしまいます。

別ページにて「ハンバーガーメニュー」内のjQuery、cssは全く同様に設置した際にはうまく作動している為
そのほかのcssが原因かと思い検証したものの2日間葛藤しても原因がわからない為助言をいただきたいです。

terateil及びコーディングも初心者の為、不足情報などあればご指摘いただければ幸いです。

※jQueryはHTML内に入れています。

HTML5
1<!DOCTYPE HTML>
2
3<html>
4<head>
5<meta charset="utf-8">
6<meta name="viewport" content="width=device-width">
7<link href="css/test.css" rel="stylesheet" media="screen,print">
8<link href="css/test-mobile.css" rel="stylesheet" media="screen,print">
9<link href="css/reset.css" rel="stylesheet" media="screen,print">
10<link href="https://fonts.googleapis.com/css?family=Norican|Pacifico|Raleway" rel="stylesheet">
11
12<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
13
14<!--ハンバーガーメニュー-->
15<script>
16	$(function(){
17			$('#nav_toggle').click(function(){
18						$("header").toggleClass('open');
19				$("nav").slideToggle(500);
20					});
21 
22		});
23</script>
24
25</head>
26
27<body>
28
29<header> 
30	<div id="g-nav">
31
32			<nav class="pc">
33				<ul>
34					<li><a href="index.html#concept">CONCEPT</a></li>
35					<li><a href="dinner.html">MENU</a></li>
36					<li><a href="#footer">ACCESS</a></li>
37				</ul>
38			</nav>
39	
40		
41		<div class="inner clearfix mobile">
42			<div id="nav_toggle">
43				<div>
44					<span></span>
45					<span></span>
46					<span></span>
47				</div>
48			</div>
49			<nav>
50				<ul>
51					<li><a href="index.html">CONCEPT</a></li>
52					<li><a href="dinner.html">MENU</a></li>
53					<li><a href="#footer">ACCESS</a></li>
54				</ul>
55			</nav>
56		</div>
57	</div>
58<--!ハンバーガーメニュー終了-->
59		
60	<div id="title">
61		<h1>Menu</h1>	
62	</div>	
63</header>
64
65</body>
66
67</html>

CSS3
1@charset "utf-8";
2
3body{
4	color: #333333;
5	font-family: 'Raleway', sans-serif;s
6}
7
8
9header{
10	width:100%;
11	position: relative;
12}
13
14.mobile{
15		display: none!important;
16	}
17
18
19#g-nav{
20	width: 100%;
21	height: 80px;
22	position: relative;
23	background-color: black;
24	position: fixed;
25	z-index: 10;
26	font-family: 'Raleway', sans-serif;
27}
28
29#title{
30	width:100%;
31	height: 303px;
32	text-align: center;
33	line-height: 303px;
34	background-color: bisque;
35	background-repeat: no-repeat;
36	background-size: cover;
37}
38
39#title h1{
40	font-size: 100px;
41	font-family: 'Norican', cursive;
42	padding-top: 30px;
43	color: #fff;
44}
45
46

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

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

回答2件

htmlのほうのnavタグにmobileクラスがついているのが原因ですね。

display: block !important
がきいてしまっているので閉じても強制的に開いてしまいます。

投稿2019/02/03 03:03

teruri

総合スコア220

shibaco

2019/02/03 04:11

teruri様ご回答ありがとうございました。綺麗に開閉することができました！ありがとうございました。無事開閉することはできたのですが、初期段階でメニューが表示→ボタン押すことでメニューがcloseされるという逆の現象が起きてしまっているようです・・・。もしも原因ご存じの方いましたら引き続きご回答お待ちしております・・・。