ハンバーガーメニュー内リンクをクリック後、メニューを閉じたい

前提・実現したいこと

AdobeのDreamweaverCC2018で作業をしています。
当方コーディング初心者につき、ネットで随時情報を得て作業をしています。

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

ハンバーガーメニューを作成しており、一部ページ内リンクとスムーススクロールを設定しています。
ハンバーガーメニュー内のリンクをクリックするとハンバーガーメニューが閉じるようにしたいと考えています。

ハンバーガーメニュー内のリンクをクリックすると該当箇所まで移動はしますが、ハンバーガーメニューが閉じずに開いたままです。
どうすれば閉じるか教えていただきたいです...。

以下、HTML、CSSを抜粋して記載しています。
エラーメッセージ

HTML
1       <div class="navToggle">
2         <span></span><span></span><span></span><span>menu</span>
3       </div>
4 
5       <nav class="globalMenuSp">
6         <ul>
7        <li><a href="#">HOME</a></li>
8	    <li><a href="#">ABOUT</a></li>
9        <li><a href="#">POLICY</a></li>
10        <li><a href="#">SEARCH</a></li>
11        <li><a href="#">CONTACT</a></li>
12        </ul>
13       </nav>

CSS
1 
2/* ハンバーガーメニューの記述 */
3
4.navToggle {
5    display: block;
6    position: fixed;    /* bodyに対しての絶対位置指定 */
7    right: 13px;
8    top: 8px;
9    width: 42px;
10    height: 51px;
11    cursor: pointer;
12    z-index: 3;
13    background-color: black;
14    text-align: center;
15}
16 
17.navToggle span {
18    display: block;
19    position: absolute;    /* .navToggleに対して */
20    width: 30px;
21    border-bottom: solid 3px #fff1d8;
22    -webkit-transition: .35s ease-in-out;
23    -moz-transition: .35s ease-in-out;
24    transition: .35s ease-in-out;
25    left: 6px;
26}
27 
28.navToggle span:nth-child(1) {
29    top: 9px;
30}
31 
32.navToggle span:nth-child(2) {
33    top: 18px;
34}
35 
36.navToggle span:nth-child(3) {
37    top: 27px;
38}
39 
40.navToggle span:nth-child(4) {
41    border: none;
42    color: #fff1d8;
43    font-size: 9px;
44    font-weight: bold;
45    top: 34px;
46}
47
48/* タップ後の記述*/
49
50/* 最初のspanをマイナス45度に */
51.navToggle.active span:nth-child(1) {
52    top: 18px;
53    left: 6px;
54    -webkit-transform: rotate(-45deg);
55    -moz-transform: rotate(-45deg);
56    transform: rotate(-45deg);
57}
58 
59/* 2番目と3番目のspanを45度に */
60.navToggle.active span:nth-child(2),
61.navToggle.active span:nth-child(3) {
62    top: 18px;
63    -webkit-transform: rotate(45deg);
64    -moz-transform: rotate(45deg);
65    transform: rotate(45deg);
66}
67
68
69/* メニューの記述 */
70
71
72nav.globalMenuSp {
73    position: fixed;
74    z-index: 2;
75    top: 0;
76    left: 0;
77    background-color: black;
78    color: #fff1d8;
79    text-align: center;
80    transform: translateY(-100%);
81    transition: all 0.3s;
82    width: 100%;
83}
84 
85nav.globalMenuSp ul {
86    background: black;
87    margin: 0 auto;
88	height: 100%;
89    width: 100%;
90	padding-top: 80px;
91	padding-bottom: 80px;
92}
93 
94nav.globalMenuSp ul li {
95    font-size: 20px;
96	font-weight: bold;
97    width: 100%;
98
99}
100
101nav.globalMenuSp ul li a {
102    display:block;
103    padding: 25px 0px;
104	color: #fff1d8;
105	text-decoration:none;
106	top: 50%;
107	left: 50%;
108	margin: 0 auto;
109	
110}
111 
112/* このクラスを、jQueryで付与・削除する */
113nav.globalMenuSp.active {
114    transform: translateY(0%);
115}
116

jquery
1 　　　   <script>
2		$(function() {
3        $('.navToggle').click(function() {
4        $(this).toggleClass('active');
5 
6        if ($(this).hasClass('active')) {
7            $('.globalMenuSp').addClass('active');
8        } else {
9            $('.globalMenuSp').removeClass('active');
10        }
11        });	
12        });
13		  
14		</script>

試したこと

ここに問題に対して試したことを記載してください。

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

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

回答1件

ベストアンサー

こんなかんじでどうでしょう。

js
1$(function() {
2  $('.navToggle').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  $('.globalMenuSp a').click(function() {
12    $('.navToggle').trigger('click');
13  });
14}); // 未テスト