ハンバーガーメニューの内部リンクを閉じると同ページの内部リンクへも影響が出てしまう

前提・実現したいこと

jQuery初心者です。お忙しい中大変恐縮ですが、どなたかご教授いただけると幸いです。
よろしくお願い致します。

内部リンクを含んだハンバーガーメニューをjQueryで実装したいです。

具体的には

ハンバーガーメニュー内の内部リンクをクリック→指定の箇所へスクロール→閉じる
内部リンクが同ページのハンバーガーメニュー外にもありこれをクリックしたときはjQueryの影響が出ないようにしたい

という点をうまく実装できずに困っています。

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

症状としては

1
内部リンククリック　→　指定の箇所にスクロール
→　ハンバーガーメニューの内容が一度は外れるが、ハンバーガーメニューを何度か開いたり閉じたりすると次第に点滅みたいになる

２
同ページのハンバーガーメニュー外の内部リンクをクリックすると、ハンバーガーメニュー内と同じようにjQueryが作動してしまう

といった感じです。

該当のソースコード

html
1<!---pc用Nav start--->
2			<nav class="pcNav">
3				<ul>
4					<li class="pcNavLi"><a href="#features_sec1">特徴</a></li>
5					<li class="pcNavLi"><a href="#price_sec2">価格</a></li>
6					<li class="pcNavLi"><a href="#contact_sec6">お問い合わせ</a></li>
7				</ul>
8			</nav>
9			<!---pcNav end--->
10<!---sp用Nav start--->
11			<nav class="spNav">
12				<ul class="hum">
13					<li class="spNavLi"><a href="#features_sec1" class="navLink1">特徴</a></li>
14					<li class="spNavLi"><a href="#price_sec2" class="navLink1">価格</a></li>
15					<li class="spNavLi"><a href="#contact_sec6" class=" navLink1">お問い合わせ</a></li>
16				</ul>
17			</nav>
18			<!---spNav end--->
19			<div class="inner_r">
20				<!---humburger menu start--->
21				<div class="menuBtn">
22					<span class="btnLine"></span>
23					<span class="btnLine"></span>
24					<span class="btnLine"></span>
25				</div>
26			</div>
27			<!---humburger menu end--->

scss
1@mixin media($width) {
2    @media only screen and (max-width: $width) {
3    @content;
4}
5}
6                nav.pcNav {
7                    display: block;
8                    @include media(768px) {
9                        display: none;
10                    }
11                    ul {
12                        @include media(768px) {
13                            display: none;
14                        }
15                        li.pcNavLi {
16                            display: inline-block;
17                            margin-right: 46px;
18                            list-style: none;
19                            font-size: 1.6rem;
20                            font-weight: bold;
21                            line-height: 2.7rem;
22                            @include media(768px) {
23                                display: none;
24                            }
25                        }
26                    }
27                }//#pcNav end
28                nav.spNav {
29                        display: none;
30                        @include media(768px) {
31                        z-index: 200;
32                        position: fixed;
33                        top: 0;
34                        left: 0;
35                        width: 100vw;
36                        height: 100vh;
37                        margin: 0;
38                        padding: 0;
39                        background-color: rgba(0,0,0,0.8);
40                        }
41                    ul.hum {
42                        @include media(768px) {
43                            display: flex;
44                            flex-direction: column;
45                            justify-content: center;
46                            align-items: center;
47                            list-style: none;
48                            width: 100%;
49                            height: 100%;
50                            margin: 0;
51                            padding: 0;
52                            z-index: 400;
53                        }
54                            li.spNavLi {
55                                margin: 30px;
56                                z-index: 500;
57                            a.navLink1:link,
58                            a.navLink1:active,
59                            a.navLink1:hover,
60                            a.navLink1:visited {
61                                    @include media(768px) {
62                                        font-weight: normal;
63                                        color: #FFF;
64                                        text-decoration: none;
65                                }
66                            }
67                        }//.spNavLi end
68                    }//.hum end 
69                } //spNav end
70                .inner_r {
71                    @include media(900px) {
72                        display: none;
73                    }
74                    @include media(768px) {
75                        display: block;
76                    }
77                    div.menuBtn {
78                        display: none;
79                        @include media(768px) {
80                            display: block;
81                            position: relative;
82                            width: 36px;
83                            height: 36px;
84                            margin: 0;
85                            padding: 0;
86                            background: -moz-linear-gradient(right, #6020B0, #FA41CC);
87                            background: -webkit-linear-gradient(right, #6020B0, #FA41CC);
88                            background: linear-gradient(to left, #6020B0, #FA41CC); 
89                            border-radius: 3px;
90                            cursor: pointer;
91                            z-index: 300;
92                            &.btnBgcolor {
93                                background: -moz-linear-gradient(right, #8a6bb1, #fca3e6);
94                                background: -webkit-linear-gradient(right, #8a6bb1, #fca3e6);
95                                background: linear-gradient(to left, #8a6bb1, #fca3e6); 
96                                }
97                        }
98                        span.btnLine:nth-child(1) {
99                            @include media(768px) {
100                                display: block;
101                                position: absolute;
102                                top: 7px;
103                                left: 8px;
104                                width: 20px;
105                                height: 3px;
106                                background-color: #FFF;
107                                border-radius: 3px;
108                            }
109                            &.close {
110                                @include media(768px) {
111                                    transform: translate(1px,9px) rotate(320deg);
112                                    transition: transform .3s ease-in;
113                                }
114                            }
115                        }
116                        span.btnLine:nth-child(2) {
117                            @include media(768px) {
118                                display: block;
119                                position: absolute;
120                                top: 16px;
121                                left: 8px;
122                                width: 20px;
123                                height: 3px;
124                                background-color: #FFF;
125                                border-radius: 3px;
126                            }
127                            &.close {
128                                @include media(768px) {
129                                    transition: opacity .2s;
130                                    opacity: 0;
131                                }
132                            }
133                        }
134                        span.btnLine:nth-child(3) {
135                            @include media(768px) {
136                                display: block;
137                                position: absolute;
138                                bottom: 7px;
139                                left: 8px;
140                                width: 20px;
141                                height: 3px;
142                                background-color: #FFF;
143                                border-radius: 3px;
144                            }
145                            &.close {
146                                @include media(768px) {
147                                    transform: translate(1px,-10px) rotate(-320deg);
148                                    transition: transform .3s ease-in;
149                                }
150                            }
151                        }
152                    }
153                }//.inner_r end

jQuery
1$(function () {
2    $('.menuBtn').click(function () {//メニューボタンクリックすると
3        $('.spNav').fadeToggle(300);//スイッチオンオフ0.3秒
4        $('.menuBtn').toggleClass('btnBgcolor');//【外観】ボタンの背景色変更
5        $('.btnLine').toggleClass('close');//【外観】.btnLineにcloseクラスを付与
6        $('a[href^="#"]').click(function () {
7            $('.menuBtn').trigger('click');
8        });
9    });
10});

試したこと

jQueryの最後の2文を以下のものも試してみましたが、結果は同じでした。

jQuery
1$('a[href^="#"]').on('click', function () {
2            $('.menuBtn').trigger('click');

ググったり、teratailの似たような投稿も拝見させていただきましたが、
全く同じ状況のものが見つからず、比べる対象がなかったので、質問するかたちとなりました。

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

VScode 1.53.2で制作しています。

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

回答1件

自己解決

その後試行錯誤した結果、自分で解決しました。

新しくactiveクラスを付与して、fadeToggleをtoggleClassに変更しました。

Scss
1nav.spNav {
2                    display: none;
3                    &.active {
4                        @include media(768px) {
5                            display: flex;
6                            z-index: 200;
7                            position: fixed;
8                            top: 0;
9                            left: 0;
10                            width: 100vw;
11                            height: 100vh;
12                            margin: 0;
13                            padding: 0;
14                            background-color: rgba(0,0,0,0.8);
15                        }
16                    }

jQuery
1$(function () {
2    $('.menuBtn').click(function () {
3        $('.spNav').toggleClass('active');
4        $('.menuBtn').toggleClass('btnBgcolor'); 
5$('.btnLine').toggleClass('close');
6        $('a[href^="#"]').on('click', function () {
7            $('.menuBtn').trigger('click');
8        });
9    });
10});
11