ドロワーメニューのアンカークリック時メニューを閉じたい

前提・実現したいこと

メニューのアンカー(リンク)をクリックしたら閉じるようにしたいです。
イメージ画像(レスポンシブのみハンバーガーメニュー表示)のメニュークリック時、メニューを閉じるにはどうしたらいいですか？
初学者のため、質問の仕方が不慣れですがよろしくお願いします。回答をコードで教えていただくと幸いです。

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

drowのメニュー(アンカー)をクリック時閉じたい。
アンカーをクリック時、ドロワーメニューが閉じません。

HTML

<!DOCTYPE html><!-- ///始め-----終わり/// -->
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>サンプル</title>
<!-- CSS -->
<link rel="stylesheet" type="text/css" href="style.css">
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script type="text/javascript" src="javascript.js"></script>
</head>
<body>
<div class="wrapper">
<!-- ///header -->
<header>
<!--menu-->
<div id="home"></div>
<nav class="gnav">
<h1>Sample</h1>

<ul id="drow">
<li><a href="#home">HOME</a></li>
<li><a href="#service">SERVICE</a></li>
<li><a href="#works">WORKS</a></li>
<li><a href="#news">NEWS</a></li>
<li><a href="#company">COMPANY</a></li>
<li><a href="#contact">CONTACT</a></li>
</ul>
</nav>

<div class="humburger" id="humburger"><!--ハンバーガーボタン-->
      <span></span>
      <span></span>
      <span></span>
</div>

</header>
<!-- header/// -->
<br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br>
<br><br><br><br><br>


</div><!-- wrapper -->
</body>
</html>

CSS
1CSS
2
3　　
4@charset "UTF-8";
5
6/* 共通部分
7--------------------------------------------------------------------------------------- */
8html {
9    font-size: 62.5%;
10    font-family: "游ゴシック体", "Yu Gothic", "YuGothic", "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", "sans-serif";
11}
12
13
14body {
15    margin: 0px auto;
16    padding: 0px;
17    text-align: center;
18    width: 100%;
19    line-height: 1.5;
20    overflow-x: hidden;
21　　 background-color: beige;
22}
23
24.wrapper {
25    margin: 0 auto;
26    text-align: left;
27    width: 1024px;
28    max-width: 100%;
29    overflow: hidden;
30    position: relative;
31}
32
33/* header
34------------------------------------------------------------------------------------------------*/
35.gnav {
36    display: flex;
37    -webkit-display: flex;
38    background-color: #699261;
39    height: 70px;
40    align-items: center;
41    -webkit-align-items: center;
42    list-style: none;
43}
44
45.gnav h1 {
46    margin-right: auto;
47    color: #222;
48    font-size: 4rem;
49    height: 60px;
50}
51
52.gnav a {
53    text-decoration: none;
54    font-size: 1.6rem;
55    padding-left: 15px;
56    padding-right: 15px;
57    color: #333;
58}
59
60.gnav a:hover {
61    color: #3B5998;
62}
63
64.gnav ul {
65    display: flex;
66    -webkit-display: flex;
67    display: -ms-flexbox;
68    list-style: none;
69}
70
71.gnav li {
72    height: 19px;
73}
74
75.gnav a {
76    position: relative;
77    display: inline-block;
78    text-decoration: none;
79}
80
81.gnav a::after {
82    position: absolute;
83    left: 0;
84    bottom: 2px;
85    content: '';
86    width: 100%;
87    height: 2px;
88    background: #3B5998;
89    opacity: 0;
90    visibility: hidden;
91    transition: .3s;
92}
93
94.gnav a:hover::after {
95    bottom: -4px;
96    opacity: 1;
97    visibility: visible;
98}
99
100
101/*ハンバーガーメニュー
102---------------------------------------------------------------------------------*/
103.humburger {
104background-color: beige;
105position: absolute;
106top: 15px;
107right: 15px;
108width: 40px;
109height: 40px;
110z-index: 2;
111}
112
113
114/*背景
115-----------------------------------------------------------------------------------*/
116.humburger span {
117  width: 30px;
118  height: 1.5px;
119  background-color: #333;
120  position: absolute;
121  top: 50%;
122  left: 50%;
123  transform: translate(-50%, -50%);
124  transition: 0.3s;
125}
126
127.humburger span:nth-of-type(1) {
128  transform: translate(-50%, -10px);
129}
130
131.humburger span:nth-of-type(3) {
132  transform: translate(-50%, 9px);
133}
134
135
136/*☓ボタン
137-----------------------------------------------------------------------------------------*/
138.humburger.active span:nth-of-type(1) {
139transform: rotate(45deg) translate(-50%, 0);
140transform-origin: 0% 50%;
141}
142
143.humburger.active span:nth-of-type(2) {
144    opacity: 0;
145}
146
147.humburger.active span:nth-of-type(3) {
148transform: rotate(-45deg) translate(-50%, 0);
149transform-origin: 0% 50%;
150}
151
152/*----------------------------------------------------------------*/
153/*レスポンシブ　メディアクエリー　(1024px～320px)
154------------------------------------------------------------------*/
155@media screen and (min-width: 1025px) {
156
157.humburger {
158    display: none;
159}
160}
161/*----------------------------------------------------------------*/
162@media screen and (max-width: 1024px) and (min-width: 1000px) {
163
164.humburger {
165    display: none;
166}
167}
168
169@media screen and (max-width: 999px) and (min-width: 768px) {
170/*---------------------------------------------------------------*/
171.humburger {
172    display: none;
173}
174}
175/*---------------------------------------------------------------*/
176@media screen and (max-width: 767px) and (min-width: 480px) {
177
178/*ドロワーメニュー--------------*/
179#drow {
180    position: absolute;
181    top: 0;
182    right: -200px;
183    width: 250px;
184    height: 100%;
185    padding: 70px 0 0 0;
186    opacity: 0;
187    transition: 0.4s;
188    visibility: hidden;
189    background-color: #ddd;
190    text-align: center;
191    z-index: 2;
192}
193
194#drow.active {
195    opacity: 0.9;
196    visibility: visible;
197    right: 0;
198}
199
200.gnav a {
201    font-size: 2rem;
202    color: black;
203}
204
205.gnav ul {
206    flex-direction: column;
207    margin: 0 auto;
208}
209
210.gnav li {
211    border-top: 2px solid #fff;
212    border-bottom: 2px solid #fff;
213    width: 250px;
214    padding-bottom: 49px;
215}
216
217.gnav li+li {
218  border-top: 0;
219  border-bottom: 2px solid #fff;
220}
221
222.gnav a {
223    padding-top: 20px;
224}
225}
226/*---------------------------------------------------------------*/
227@media screen and (max-width: 479px) and (min-width: 320px) {
228
229/*ドロワーメニュー-----------------------------*/
230#drow {
231    position: absolute;
232    top: 0;
233    right: -250px;
234    width: 250px;
235    height: 100%;
236    padding: 70px 0 0 0;
237    opacity: 0;
238    transition: 0.4s;
239    visibility: hidden;
240    background-color: #ddd;
241    text-align: center;
242    z-index: 2;
243}
244
245#drow.active {
246    opacity: 0.9;
247    visibility: visible;
248    right: 0;
249}
250
251.gnav a {
252    font-size: 2rem;
253    color: black;
254}
255
256.gnav ul {
257    flex-direction: column;
258    margin: 0 auto;
259}
260
261.gnav li {
262    border-top: 2px solid #fff;
263    border-bottom: 2px solid #fff;
264    width: 250px;
265    padding-bottom: 49px;
266}
267
268.gnav li+li {
269  border-top: 0;
270  border-bottom: 2px solid #fff;
271}
272
273.gnav a {
274    padding-top: 20px;
275}
276}
277/*---------------------------------------------------------------*/

javascript
1/*-----ハンバーガーメニューとドロワーメニューの動き------*/
2 document.addEventListener('DOMContentLoaded', function() {
3   document.getElementById("humburger").addEventListener("click", function() {
4   	this.classList.toggle("active");
5   	document.getElementById("drow").classList.toggle("active");
6   })
7  });

試したこと

クリック時クラスを削除しましたがうまくいきません。
drow a にクラスをつけてクリック時閉じること。

javascript
1$(function() {
2  $('drow a[href^="#"]').click(function(){
3  $('humburger').removeclass("active");
4    })
5    });

akihiro3

2020/07/28 10:07

現在のコードでは再現が出来ないので、他のコードも記載お願いします。

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

回答3件

ベストアンサー

・jqueryのセレクタはcssと同じように、「.(ドット)」や「#」を使います
・removeclassの「c」は大文字です

以上をふまえて、下記でどうでしょうか？

jquery
1 $('#drow a[href^="#"]').on('click', function() {
2   $("#humburger").removeClass("active");
3   $("#drow").removeClass("active");
4 });

投稿2020/07/30 06:31

akihiro3

総合スコア955

masaki1117

2020/07/30 16:08

回答ありがとうございます。返信が遅くなり大変申し訳ありません。「C」は大文字なんですね！始めたばかりなので、勉強になります。上記のコードを参考にしてみましたが、クリック時閉じないままです。

akihiro3

2020/07/31 08:42

エラー出てないですか？

masaki1117

2020/07/31 09:23

エラーは出ていないです。アンカークリック後、ハンバーガーボタンも✖のままで何も起こりません。検証で見てみましたが、うまく動作していないため最初と変わらないのが現状です。お手数おかけして申し訳ありません。

akihiro3

2020/07/31 09:53

html,css,jsは質問文の掲示のまま、「試したこと」のjqueryを回答のコードに変更で、こちらはハンバーガーもメニューも閉じてるのですが何故でしょう？

akihiro3

2020/07/31 09:56

クリックイベントの中身をアラートに変更してテストしてもらえますか？アラートが出なかったら、クリックイベントまでのどこかで間違えてます。

masaki1117

2020/07/31 10:33

上記のコードで閉じるようになりました。アラートで確認したところ、「；」が一部なくて反応しませんでした。何度も親切にお答えしてくださりとても感謝の気持ちでいっぱいです。初歩的なミスで、何時間も....もやもやしていました。無事解決できた時は声ができました、ありがとうございました。

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

$('drow a[href^="#"]').click(function(){
これは、何にも反応しないです。

drow という要素はないですから。a要素はあります。

「
クリック時クラスを削除しましたがうまくいきません。
drow a にクラスをつけてクリック時閉じること。
」

クリック時クラスを削除しましたが……
削除できていないです。クリック時の発火もできていないです。

同様に
$('humburger')もありませんので、class名の削除もできません。

jqueryのセレクタをお調べになり、idやclassを選択できるように修正してみてください。

投稿2020/07/28 14:15

Hi_32

総合スコア23

humburger.
下のJavaScriptのハンバーガーにドットが混入しているようですので、これが原因かもしれません

投稿2020/07/28 08:24

Jon_do

総合スコア1373

masaki1117

2020/07/28 09:47

ドットと取り除きましたができませんでした。検証を見ましたが、drowにはclassがついていますがdrow aにはついていませんでした。そのためクリック時閉じないのだと思います。

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

あなたの回答

tips

プレビュー

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

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.35%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！

ドロワーメニューのアンカークリック時メニューを閉じたい

前提・実現したいこと

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

試したこと

関連した質問