ハンバーガーメニューが閉じない

ハンバーガーメニューの開いている時、リンクを押すとメニュー閉じて欲しいのですがそのまま残ってしまいます。
消す場合にはどのようにしたら良いでしょうか？
よろしくお願いします。

html
1  <header>
2      <div class="hamburger">
3        <span></span>
4        <span></span>
5        <span></span>
6      </div>
7
8      <nav class="globalMenuSp">
9        <ul>
10          <li><a href="#">NEWS</a></li>
11          <li><a href="#product">PRODUCT</a></li>
12          <li><a href="#service">SERVICE</a></li>
13          <li><a href="#">COMPANY</a></li>
14          <li><a href="#">PRIVACY POLICY</a></li>
15          <li><a href="footer">CONTACT</a></li>
16          <li><a href="#">Q&A</a></li>
17        </ul>
18      </nav>
19    </header>

css
1.hamburger {
2  display: block;
3  position: fixed;
4  z-index: 50;
5  right: 32px;
6  top: 32px;
7  width: 42px;
8  height: 42px;
9  cursor: pointer;
10  text-align: center;
11  background: rgba(174, 174, 174, 0);
12  z-index: 500;
13}
14.hamburger span {
15  display: block;
16  position: absolute;
17  width: 30px;
18  height: 2px;
19  left: 6px;
20  background: #555;
21  transition: 0.5s all;
22}
23.hamburger span:nth-child(1) {
24  top: 10px;
25}
26.hamburger span:nth-child(2) {
27  top: 20px;
28}
29.hamburger span:nth-child(3) {
30  top: 30px;
31}
32
33.hamburger.active span:nth-child(1) {
34  top: 16px;
35  left: 6px;
36  transform: rotate(-45deg);
37  z-index: 200;
38}
39.hamburger.active span:nth-child(2) {
40  left: 60%;
41  opacity: 0;
42  -webkit-animation: active-btn17-bar02 0.8s forwards;
43  animation: active-hamburger-bar02 0.8s forwards;
44}
45@-webkit-keyframes active-hamburger-bar02 {
46  100% {
47    height: 0;
48  }
49}
50@keyframes active-hamburger-bar02 {
51  100% {
52    height: 0;
53  }
54}
55.hamburger.active span:nth-child(3) {
56  top: 16px;
57  transform: rotate(45deg);
58}
59
60.hamburger::after {
61  position: absolute;
62  top: 50%;
63  left: 50%;
64  display: block;
65  content: "";
66  width: 80px;
67  height: 80px;
68  margin: -45px 0 0 -43px;
69  border-radius: 50%;
70  border: 1px solid rgba(0, 0, 0, 0);
71  transition: all 0.75s;
72}
73.hamburger.active::after {
74  border: 1px solid #555;
75}
76
77nav.globalMenuSp {
78  position: fixed;
79  z-index: 2;
80  top: 0;
81  right: 0;
82  color: #1E313F;
83  background: rgba(89, 89, 89, 0.89);
84  text-align: center;
85  transform: translateX(100%);
86  transition: all 0.6s;
87  width: 40%;
88  height: 100%;
89  z-index: 100;
90  font-family: "Palatino", "Scheherazade", "serif";
91  font-size: 1.2rem;
92}
93nav.globalMenuSp ul {
94  padding: 20px;
95  }
96nav.globalMenuSp ul li {
97  list-style-type: none;
98  padding: 5px;
99  height: 100%;
100  /* border-bottom: 1px solid #555; */
101}
102nav.globalMenuSp ul li:last-child {
103  padding-bottom: 0;
104}
105nav.globalMenuSp ul li a:hover {
106  color: rgb(255, 255, 255);
107}
108
109nav.globalMenuSp ul li a {
110  display: block;
111  color: #000;
112  padding: 1.5em 0;
113  text-decoration: none;
114}

js
1$(function() {
2    $('.hamburger').click(function() {
3        $(this).toggleClass('active');
4
5        if ($(this).hasClass('active')) {
6            $('.globalMenuSp').addClass('active');
7        } else {
8            $('.globalMenuSp').removeClass('active');
9        }
10    });
11});

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

回答1件

ベストアンサー

やりたい事としてはアンカーリンクでも閉じたいってことですね。

過去に似た質問があるので、下記なんかを参照すれば解決するかと思います。

ハンバーガーメニュー・ページ内リンクをクリックで閉じる

追記：質問する際に一度過去の質問を検索かけてみると良いかもしれません。

投稿2021/04/27 05:48

編集2021/04/27 05:59

mutsuki22

総合スコア445

mikan23

2021/04/28 06:34

ご回答ありがとうございます。恥ずかしながらjs初心者のため、添付された過去のコードをどこに入れていいかわかりません。一応いろいろな箇所にはめてみましたが変化がなく。。。今書いているコードの続きなのでしょうか？

mutsuki22

2021/04/28 07:33

$(function() { $('.hamburger').click(function() { $(this).toggleClass('active'); if ($(this).hasClass('active')) { $('.globalMenuSp').addClass('active'); } else { $('.globalMenuSp').removeClass('active'); } }); ーーーここに入れるーーー }); ですね。後、一応お伝えしておくとほぼほぼ一緒とは言えクラス名とかはご自身のものに合わせたり、足りない部分は追記して下さい。

mikan23

2021/04/28 14:34

ご回答ありがとうございます。記述し自分のコード用に変更しましたがおそらく私のやり方が悪く反応しませんでしたのでもう少しいじってみます。ご助言ありがとうございました！！

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