ハンバーガーメニュー内のリンクをクリックとすると該当箇所まで移動はしますが、ハンバーガーメニューが閉じずに開いたままになります。

ハンバーガーメニュー内のリンクをクリックするとハンバーガーメニューが閉じるようにしたいと考えています。

【現状】
ハンバーガーメニュー内のリンクをクリックとすると該当箇所まで移動はしますが、ハンバーガーメニューが閉じずに開いたままです。

【やりたい事】
ハンバーガーメニュー内のリンクをクリックで該当箇所まで移動と同時にハンバーガーメニューを閉じたいです。

html
1<nav class="globalMenuSp">
2    <ul>
3        <li><a href="#">Menu1</a></li>
4        <li><a href="#">Menu2</a></li>
5        <li><a href="#">Menu3</a></li>
6        <li><a href="#">Menu4</a></li>
7        <li><a href="#">Menu5</a></li>
8    </ul>
9</nav>

css
1/*　ハンバーガーボタン　*/
2.hamburger {
3  display : block;
4  position: fixed;
5  z-index : 3;
6  right : 13px;
7  top   : 12px;
8  width : 42px;
9  height: 42px;
10  cursor: pointer;
11  text-align: center;
12}
13.hamburger span {
14  display : block;
15  position: absolute;
16  width   : 30px;
17  height  : 2px ;
18  left    : 6px;
19  background : #555;
20  -webkit-transition: 0.3s ease-in-out;
21  -moz-transition   : 0.3s ease-in-out;
22  transition        : 0.3s ease-in-out;
23}
24.hamburger span:nth-child(1) {
25  top: 10px;
26}
27.hamburger span:nth-child(2) {
28  top: 20px;
29}
30.hamburger span:nth-child(3) {
31  top: 30px;
32}
33
34/* ナビ開いてる時のボタン */
35.hamburger.active span:nth-child(1) {
36  top : 16px;
37  left: 6px;
38  -webkit-transform: rotate(-45deg);
39  -moz-transform   : rotate(-45deg);
40  transform        : rotate(-45deg);
41}
42
43.hamburger.active span:nth-child(2),
44.hamburger.active span:nth-child(3) {
45  top: 16px;
46  -webkit-transform: rotate(45deg);
47  -moz-transform   : rotate(45deg);
48  transform        : rotate(45deg);
49}
50
51nav.globalMenuSp {
52  position: fixed;
53  z-index : 2;
54  top  : 0;
55  left : 0;
56  color: #000;
57  background: #fff;
58  text-align: center;
59  transform: translateY(-100%);
60  transition: all 0.6s;
61  width: 100%;
62}
63
64nav.globalMenuSp ul {
65  background: #ccc;
66  margin: 0 auto;
67  padding: 0;
68  width: 100%;
69}
70
71nav.globalMenuSp ul li {
72  list-style-type: none;
73  padding: 0;
74  width: 100%;
75  border-bottom: 1px solid #fff;
76}
77nav.globalMenuSp ul li:last-child {
78  padding-bottom: 0;
79  border-bottom: none;
80}
81nav.globalMenuSp ul li:hover{
82  background :#ddd;
83}
84
85nav.globalMenuSp ul li a {
86  display: block;
87  color: #000;
88  padding: 1em 0;
89  text-decoration :none;
90}
91
92/* このクラスを、jQueryで付与・削除する */
93nav.globalMenuSp.active {
94  transform: translateY(0%);
95}
96

Javascript
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件

ベストアンサー

javascript
1$(function(){
2  $('.hamburger').on('click',function() {
3    var ham=$(this);
4    $(this).toggleClass('active');
5    $('.globalMenuSp').toggleClass('active',function(){
6      return ham.hasClass('active');
7    });
8  });
9  $('.globalMenuSp a').on('click',function(){
10     $('.globalMenuSp').removeClass('active');
11  });
12});