ハンバーガーメニューの閉じ方について

HTML、CSSを勉強したばかりでjQueryについてはほぼ分かっていないので、ハンバーガーメニューのjQueryをコピペしました。

メニューが開くところまではできたのですが、リンクをクリックした後、さらにバツ印をクリックしないと閉じないものだったので、メニュークリックすると閉じるように、showクラス外すjQueryも追記したのですが上手く動きません。

何が原因なのかお教え頂けませんでしょうか。

HTML
1<div>
2    <nav class="nav">
3        <ul class="menu">
4            <li><a href="#about" class="navi">お店紹介</a></li>
5            <li><a href="#products" class="navi">商品紹介</a></li>
6            <li><a href="#news" class="navi">ニュース</a></li>
7            <li><a href="#map" class="navi">店舗情報</a></li>
8        </ul>
9    </nav>
10    <span class="nav_toggle">
11        <i></i>
12        <i></i>
13        <i></i>
14    </span>
15</div>
16
17<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
18<script src="./jquery.js"></script>

CSS
1.nav_toggle {
2  display: none;
3}
4
5@media screen and (max-width: 572px) {
6
7/* ハンバーガーのマーク */
8  .nav_toggle {
9    display: block;
10    position: fixed;
11    top: 20px;
12    right: 5px;
13    width: 1.75rem;
14    height: 1.5rem;
15    margin-right: 15px;
16    z-index: 2;
17  }
18
19  .nav_toggle i {
20    display: block;
21    width: 100%;
22    height: 2px;
23    background-color: #333;
24    position: absolute;
25    transition: transform 0.2s, opacity 0.5s;
26  }
27
28  .nav_toggle i:nth-child(1) {
29    top: 0;
30  }
31
32  .nav_toggle i:nth-child(2) {
33    top: 0;
34    bottom: 0;
35    margin: auto;
36  }
37
38  .nav_toggle i:nth-child(3) {
39    bottom: 0;
40  }
41
42  /* クリックされた後のハンバーガーのマーク */
43  .nav_toggle.show i:nth-child(1) {
44    transform: translateY(2px) rotate(-45deg);
45  }
46
47  .nav_toggle.show i:nth-child(2) {
48    opacity: 0;
49  }
50
51  .nav_toggle.show i:nth-child(3) {
52    transform: translateY(-8px) rotate(45deg);
53  }
54
55  .nav_toggle.show {
56    margin: 5px 15px 0 0;
57  }
58
59  /* クリックで表示されるメニュー：クリックされる前 */
60  .nav {
61    display: flex;
62    position: fixed;
63    align-items: center;
64    justify-content: center;
65    top: 0;
66    left: 0;
67    right: 0;
68    bottom: 0;
69    opacity: 0;
70    visibility: hidden;
71    transition: opacity 0.5s, visibility 0.5s;
72    background-color: #fff;
73    z-index: 1;
74  }
75
76  .menu {
77    margin: 50px 20px 0 0;
78  }
79
80  .menu li {
81    font-size: 16px;
82    margin-bottom: 30px;
83  }
84
85  .navi {
86    color: #2c2c2c;
87    text-decoration: none;
88  }
89
90  /* クリックで表示されるメニュー：クリックされた後 */
91  .nav.show {
92    opacity: 1;
93    visibility: visible;
94  }
95
96}

jQuery
1$(".nav_toggle").on("click", function () {
2  $(".nav_toggle, .nav").toggleClass("show");
3});
4
5$(".nav.show a").on("click", function() {
6  $(".nav.toggle, .nav").removeClass("show");
7} );

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

回答1件

ベストアンサー

再現確認してみまして、少しクラスの指定を変えてみました。
想定通りになっていますでしょうか。

diff
1<     $(".nav.show a").on("click", function () {
2<         $(".nav.toggle, .nav").removeClass("show");
3---
4>     $(".nav a").on("click", function () {
5>         $(".nav_toggle, .nav").removeClass("show");