ハンバーガーメニューをTAP後に閉じるようにしたい

前提・実現したいこと

作成したハンバーガーメニューに表示されている項目をTAP後、
ハンバーガーメニューが閉じられるようにしたいです。

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

色々と調べてJSファイルを入れてみたのですが、改善されず。
実際にソースコードを見ていただいてご指摘いただけると幸いです。

該当のソースコード

PHP
1 <!--SP版メニュ-->
2
3          <div class="cp_fullscreenmenu">
4          <input type="checkbox" id="menuToggle" />
5
6          <label for="menuToggle" class="hamburger">
7          <div class="open"></div>
8          </label>
9
10          <div class="menu menuEffects">
11          <label for="menuToggle"></label>
12          <div class="menucont">
13          	<ul id="nav-sp">
14          		<li><a href="#top">TOP</a></li>
15          		<li><a href="#OUR">OUR STORY</a></li>
16          		<li><a href="#Use">HOW TO USE</a></li>
17          		<li><a href="#News">TOPICS</a></li>
18          	</ul>
19          </div>
20          </div>
21          </div>
22
23<!--PC版メニュ-->
24
25         <nav class="nav-pc">
26             <ul id="nav-pc">
27               <li class="ol"><a href="#top">TOP</a></li>
28               <li class="ol"><a href="#OUR">OUR STORY</a></li>
29               <li class="ol"><a href="#Use">HOW TO USE</a></li>
30               <li class="ol"><a href="#News">TOPICS</a></li>
31             </ul>
32         </nav>

CSS
1/*特定のサイズ時に表示しないSP版のNAVIリスト*/
2
3@media screen and (min-width: 1000px){
4  .cp_fullscreenmenu
5  {
6  display:none;
7  }
8}
9
10/*特定のサイズ時に表示しないPC版のNAVIリスト*/
11
12@media screen and (max-width: 999px){
13  .nav-pc {
14  display:none;
15  }
16}
17
18* {
19	-webkit-box-sizing: border-box;
20	        box-sizing: border-box;
21}
22a,
23a:visited,
24a:hover,
25a:active {
26	text-decoration: none;
27	color: inherit;
28}
29
30input {
31  display: none;
32}
33.cp_fullscreenmenu {
34	position: fixed;
35	z-index: 1;
36	top: 0;
37	right: 0;
38}
39
40/*menuコンテンツ*/
41
42.cp_fullscreenmenu .menu {
43	position: fixed;
44	top: 0;
45	left: 0;
46	width: 100vw;
47	height: 100vh;
48  background-image: linear-gradient(134.32deg,rgba(131, 58, 180, 0.8),rgba(253, 29, 29, 0.8),rgba(252, 176, 69, 0.8));
49}
50.cp_fullscreenmenu .menu label {
51	position: absolute;
52	top: 20px;
53	right: 20px;
54	width: 30px;
55	height: 30px;
56	cursor: pointer;
57	background-size: 100%;
58}
59.cp_fullscreenmenu .menu .menucont {
60	font-size: 54px;
61	position: relative;
62	top: 50%;
63	margin-top: -170px;
64	padding-bottom: 20px;
65	text-align: center;
66}
67.cp_fullscreenmenu .menu ul {
68	margin: 0 auto;
69	padding: 0;
70	list-style: none;
71}
72.cp_fullscreenmenu .menu ul li,
73.cp_fullscreenmenu .menu ul li a {
74	transition: all 0.3s ease;
75}
76.cp_fullscreenmenu .menu ul li a {
77	display: block;
78	padding: 20px 0;
79	color: #ffffff;
80  font-family: 'AcademyEngravedLetPlain',sans-serif;
81}
82.cp_fullscreenmenu .menu ul li a:hover {
83	color: #ff0844;
84}
85.cp_fullscreenmenu .menu ul li:hover {
86	background: #ffffff;
87}
88
89/*クリックしたらメニューが開閉の動作*/
90
91.cp_fullscreenmenu .menuEffects {
92	visibility: hidden;
93	transition: opacity 0.5s, visibility 0.5s;
94	opacity: 0;
95}
96.cp_fullscreenmenu .menuEffects ul {
97	transition: all 0.5s;
98	transform: translateY(0%);
99}
100.cp_fullscreenmenu #menuToggle:checked ~ .menuEffects {
101	visibility: visible;
102	transition: opacity 0.5s;
103	opacity: 1;
104}
105.cp_fullscreenmenu #menuToggle:checked ~ .menuEffects ul {
106	opacity: 1;
107}
108.cp_fullscreenmenu #menuToggle:checked ~ .hamburger .open {
109	background-color: transparent;
110}
111.cp_fullscreenmenu #menuToggle:checked ~ .hamburger .open:before {
112	position: absolute;
113	z-index: 1;
114	top: 0;
115	right: 0;
116	content: '';
117	transform: rotate(45deg);
118	background-color: #ffffff;
119}
120.cp_fullscreenmenu #menuToggle:checked ~ .hamburger .open:after {
121	position: relative;
122	z-index: 1;
123	top: 0;
124	right: 0;
125	content: '';
126	transform: rotate(-45deg);
127	background-color: #ffffff;
128}
129.cp_fullscreenmenu #menuToggle:not(:checked) ~ .menuEffects ul {
130	transform: translateY(-30%);
131}
132/*ハンバーガー*/
133.cp_fullscreenmenu .hamburger {
134	position: relative;
135	top: 0;
136	right: 0;
137	display: block;
138	width: auto;
139  height: auto;
140	padding-top: 30px;
141  padding-right: 30px;
142	cursor: pointer;
143}
144.cp_fullscreenmenu .hamburger:hover .open:before {
145	top: -9px;
146}
147.cp_fullscreenmenu .hamburger:hover .open:after {
148	top: 5px;
149}
150.cp_fullscreenmenu .open,
151.cp_fullscreenmenu .open:before,
152.cp_fullscreenmenu .open:after {
153	position: relative;
154	display: block;
155	width: 24px;
156	height: 4px;
157	border-radius: 2px;
158	background-color: #FFFFFF;
159	transition: all 0.3s ease;
160}
161.cp_fullscreenmenu .open {
162	top: 8px;
163	cursor: pointer;
164}
165.cp_fullscreenmenu .open:before {
166	top: -8px;
167	content: '';
168	transform: rotate(0deg);
169}
170.cp_fullscreenmenu .open:after {
171	top: 4px;
172	content: '';
173}

試したこと

以下のようにjsをファイルを作ったのですが、ハンバーガーメニューは消えてくれず。。

$('#nav-sp a[href]').on('click', function(event) {
    $('.cp_fullscreenmenu').trigger('click');
});

m.ts10806

2021/03/06 08:14

JavaではなくJavaScriptですねタグ修正を

MAGUROKUN

2021/03/06 08:25

すいません、素人なもので...ありがとうございます。

m.ts10806

2021/03/06 08:26

タグ説明とか読んでみると良いですよ

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

回答1件

チェックボックス#menuToggleのチェック状態に応じてメニューを開閉させる作戦ですよね? なので、メニューを閉じるにはチェックボックスのチェックを解除してやれば良いです。

javascript
1$('#menuToggle').prop('checked', false);

あるいは、間接的に、$('#menuToggle').trigger('click')や$('.hamburger').trigger('click')でも良いかもしれません。

現状のコードだと、チェックボックスの外側のdivをクリックする感じになるので、うまくいかないのでしょう。

投稿2021/03/07 04:44

gpsoft

総合スコア1323

MAGUROKUN

2021/03/07 08:58

ありがとうございます！ $('#menuToggle').prop('checked', false); 上記を入れてみたのですが、何も変化がなく。。。 menuToggleにチェックが入った状態でハンバーガーメニュー内のリンクを押したらチェックを外すというjavascriptなのでしょうか？

gpsoft

2021/03/07 15:45

不思議ですね。私の環境では、ちゃんとメニューが閉じますけどね。現状の、$('.cp_fullscreenmenu').trigger('click');の部分を、私のコードで置き換えるだけですよ。 > ハンバーガーメニュー内のリンクを押したらチェックを外すというjavascriptなのでしょうか？はい、そうです。

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