ハンバーガーメニューが勝手に閉じる

前提・実現したいこと

検証ツールのレスポンシブで確認してもハンバーガーメニューが勝手に閉じないようにしたい。

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

検証ツールを使わず画面サイズを小さくして確認するとハンバーガーメニューは普通に開閉できます。
検証ツール(例えば320px)では一瞬開くのですが、すぐに勝手に閉じます。

(検証ツールを使わなくても時々同様の問題が起きますが、スーパーリロードをすると戻ります。)

該当のソースコード

html
1<header class="header">
2    <div class="header_logo">
3      <a href="">
4        <img src="img/logo (2).svg" alt="Engress">
5      </a>
6    </div>
7    <nav class="header_nav" id="header_nav">
8      <nav class="header-sp-nav">
9        <ul class="header-sp-menu">
10          <li class="header-sp-menu-list"><a href="">ホーム</a></li>
11          <li class="header-sp-menu-list"><a href="">お知らせ</a></li>
12          <li class="header-sp-menu-list"><a href="">ブログ</a></li>
13          <li class="header-sp-menu-list"><a href="">コース・料金</a></li>
14        </ul>
15        <div class="header_sp-btn-box">
16          <a href="">
17            <div class="square-request-btn header_sp-btn">
18              <span class="square-request-btn-text">
19                資料請求
20              </span>
21            </div>
22          </a>
23          <a href="">
24            <div class="contact-btn header_sp-btn">
25              <span class="contact-btn-text">
26                お問い合わせ
27              </span>
28            </div>
29          </a>
30        </div>
31      </nav>
32      <div class="ham" id="ham"><a href="">
33        <span class="ham-line ham-line1"></span>
34        <span class="ham-line ham-line2"></span>
35        <span class="ham-line ham-line3"></span>
36      </a></div>
37      <div class="black-bg" id="js-black-bg"></div>
38      <ul class="header_list">
39        <li class="header_list-item"><a href="" class="p">ホーム</a></li>
40        <li class="header_list-item"><a href="" class="p">お知らせ</a></li>
41        <li class="header_list-item"><a href="" class="p">ブログ</a></li>
42        <li class="header_list-item"><a href="" class="p">コース・料金</a></li>
43      </ul>
44      <div class="header_right">
45        <div class="tel-box">
46          <small class="tel-hour">平日08:00〜20:00</small>
47          <p class="tel-number"><a href="tel:0123-456-7890" class="p">0123-456-7890</a></p>
48        </div>
49        <a href="">
50          <div class="square-request-btn header_pc-btn">
51            <span class="square-request-btn-text">
52              資料請求
53            </span>
54          </div>
55        </a>
56        <a href="">
57          <div class="contact-btn header_pc-btn">
58            <span class="contact-btn-text">
59              お問い合わせ
60            </span>
61          </div>
62        </a>
63      </div>
64    </nav>
65  </header>

scss
1//style.scss
2
3@charset 'utf-8';
4
5/*
6html5doctor.com Reset Stylesheet
7v1.6.1
8Last Updated: 2010-09-17
9Author: Richard Clark - http://richclarkdesign.com
10Twitter: @rich_clark
11*/
12
13...
14
15// reset CSS ここまで
16
17@function vw($width, $px) {
18  @return $px / $width * 100vw;
19}
20
21@function vh($height, $px) {
22  @return $px / $height * 100vh;
23}
24
25$bpc: 1600px; //PC大画面
26$spc: 1280px; // PC通常
27$ipad: 768px; // iPad
28$sp: 375px; // スマホ
29
30@mixin sp {
31  @media screen and (min-width: $sp) {
32    @content;
33  }
34}
35
36@mixin ipad {
37  @media screen and (min-width: $ipad) {
38    @content;
39  }
40}
41
42@mixin spc {
43  @media screen and (min-width: $spc) {
44    @content;
45  }
46}
47
48@mixin bpc {
49  @media screen and (min-width: $bpc) {
50    @content;
51  }
52}
53
54$navyBlue: #1B224C;
55$yellowOrange: #F5A623;
56$thinGray: #D5D5D5;
57$moreThinGray: #F8F8F8;
58$white: #FFFFFF;
59
60html {
61  font-size: 62.5%;
62  /* -> 10px; */
63}
64
65body {
66  font-family: "游ゴシック体", "游ゴシック", "Yu Gothic", "YuGothic", "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
67}
68
69h1 {
70  font-size: 4rem;
71  font-weight: bold;
72  line-height: 1.3;
73  color: $navyBlue;
74
75  @include spc {
76    font-size: 4.8rem;
77    line-height: 1.4;
78  }
79}
80
81h2 {
82  font-weight: bold;
83  line-height: 1.4;
84  font-size: 2.1rem;
85  color: $navyBlue;
86
87  @include spc {
88    font-size: 3.6rem;
89  }
90}
91
92h3 {
93  font-size: 2rem;
94  font-weight: bold;
95  line-height: 1.7;
96  color: $navyBlue;
97
98  @include spc {
99    font-size: 3.2rem;
100  }
101}
102
103h4 {
104  font-weight: bold;
105  line-height: 1.5;
106  font-size: 1.8rem;
107  color: $navyBlue;
108
109  @include spc {
110    font-size: 2.6rem;
111  }
112}
113
114h5 {
115  font-size: 1.8rem;
116  font-weight: 200;
117  line-height: 1.5;
118  color: $navyBlue;
119
120  @include spc {
121    line-height: 1.7;
122  }
123}
124
125p,
126.p {
127  font-size: 1.5rem;
128  font-weight: 200;
129  line-height: 1.5;
130  color: $navyBlue;
131
132  @include spc {
133
134    line-height: 1.7;
135    font-size: 1.6rem;
136  }
137}
138
139small {
140  font-size: 1.2rem;
141  font-weight: 200;
142  line-height: 1.7;
143  color: $navyBlue;
144}
145
146a {
147  text-decoration: none;
148
149  &:hover {
150    opacity: .8;
151  }
152}
153
154ul {
155  list-style: none;
156}
157
158.smallDone {
159  display: block;
160
161  @include spc {
162    display: none;
163  }
164}
165
166.smallNone {
167  display: none;
168
169  @include spc {
170    display: block;
171  }
172}
173
174.container {
175  margin: 0 auto;
176  max-width: 1600px;
177  width: 90%;
178
179  @include ipad {
180    width: vw(1280, 900);
181  }
182}
183

scss
1//header.scss
2
3@charset "utf-8";
4
5@import 'style.scss';
6
7.header {
8  display: flex;
9  align-items: center;
10  height: 5rem;
11  position: fixed;
12  background-color: $white;
13  width: 100%;
14
15  @include ipad {
16    height: 8rem;
17  }
18}
19
20.header_logo {
21  margin: auto 0;
22  margin-left: .5rem;
23
24  @include ipad {
25    margin-left: 1.5rem;
26  }
27
28  a {
29    img {
30      width: 10rem;
31      height: auto;
32
33      @include ipad {
34        width: 13.6rem;
35        height: 2.7rem;
36      }
37    }
38  }
39}
40
41.header_nav {
42  margin-left: auto;
43  display: flex;
44  align-items: center;
45
46  @include spc {
47    width: 100%;
48  }
49}
50
51.header-sp-nav {
52  width: 100%;
53  max-width: 250px;
54  height: 100%;
55  background-color: $navyBlue;
56  position: fixed;
57  top: 0;
58  right: 0;
59  z-index: 10;
60  transform: translate(250px);
61  transition: all .5s;
62}
63
64.header-sp-nav.open {
65  transform: translate(0);
66}
67
68.header-sp-menu {
69  // padding-top: 5rem;
70
71  @include ipad {
72    // padding-top: 8rem;
73  }
74}
75
76.header-sp-menu-list {
77  margin: 5rem 4rem;
78
79  a {
80    color: $white;
81    font-size: 1.6rem;
82    font-weight: bold;
83  }
84}
85
86.header_sp-btn-box {
87  display: flex;
88}
89
90.header_sp-btn {
91  display: flex;
92  justify-content: center;
93  align-items: center;
94  width: 10rem;
95  height: 4rem;
96  background-color: $yellowOrange;
97  margin-left: 2rem;
98
99  @include spc {
100    display: none;
101  }
102}
103
104.ham {
105  width: 4em;
106  height: 4em;
107  cursor: pointer;
108  position: relative;
109  z-index: 20;
110
111  @include spc {
112    display: none;
113  }
114}
115
116.ham-line {
117  position: absolute;
118  left: 1em;
119  width: 2em;
120  height: 0.2em;
121  background-color: $navyBlue;
122  transition: all 0.3s;
123}
124
125.ham-line.open {
126  background-color: $white;
127}
128
129.ham-line1 {
130  top: 1em;
131}
132
133.ham-line1.open {
134  transform: rotate(45deg);
135  top: 2em;
136}
137
138.ham-line2 {
139  top: 1.8em;
140}
141
142.ham-line2.open {
143  width: 0;
144}
145
146.ham-line3 {
147  top: 2.6em;
148}
149
150.ham-line3.open {
151  transform: rotate(-45deg);
152  top: 2em;
153}
154
155.black-bg {
156  position: fixed;
157  left: 0;
158  top: 0;
159  width: 100vw;
160  height: 100vh;
161  z-index: 5;
162  background-color: #000;
163  opacity: 0;
164  visibility: hidden;
165  transition: all .6s;
166  cursor: pointer;
167}
168
169.black-bg.open {
170  opacity: .8;
171  visibility: visible;
172}
173
174.header_list {
175
176  @include spc {
177    display: flex;
178  }
179}
180
181.header_list-item {
182  display: none;
183
184  @include spc {
185    display: block;
186    margin-left: 2.8rem;
187    font-weight: bold;
188    line-height: 1.8;
189  }
190
191  a {
192    color: $navyBlue;
193  }
194}
195
196.header_right {
197  display: none;
198  margin-left: auto;
199
200  @include spc {
201    display: flex;
202  }
203}
204
205.tel-box {
206
207  @include spc {
208    margin-right: 1.4rem;
209  }
210}
211
212.tel-hour {
213  color: $navyBlue;
214}
215
216.tel-number {
217
218  a {
219    color: $navyBlue;
220
221    &::before {
222      content: '';
223      display: inline-block;
224      background-image: url(../img/tel29.svg);
225      background-repeat: no-repeat;
226      background-position: center right;
227      width: 3rem;
228      height: 3rem;
229      margin-right: .5rem;
230      margin-bottom: .3rem;
231      vertical-align: middle;
232    }
233
234    @include spc {
235      font-weight: bold;
236    }
237  }
238}
239
240.header_pc-btn {
241  display: none;
242
243  @include spc {
244    display: flex;
245    justify-content: center;
246    align-items: center;
247    width: 14rem;
248    height: 5rem;
249    margin-right: 1rem;
250  }
251}
252
253.square-request-btn {
254  font-size: 1.4rem;
255  line-height: 1.7;
256  font-weight: bold;
257  border-radius: .5rem;
258  background-color: $yellowOrange;
259  color: $white;
260}
261
262.contact-btn {
263  font-size: 1.4rem;
264  font-weight: bold;
265  line-height: 1.7;
266  border-radius: .5rem;
267  color: $white;
268
269  @include spc {
270    background-color: $navyBlue;
271  }
272}
273

jQuery
1$(function () {
2
3  //ハンバーガーメニュー開閉
4  $('.ham').on('click', function () {
5    $('#js-black-bg').toggleClass('open');
6    $('.header-sp-nav').toggleClass('open');
7    $('.ham-line, .ham-line1, .ham-line2, .ham-line3').toggleClass('open');
8  });
9
10  //ハンバーガーメニューのナビリンククリック後自動で閉じる
11  $('.header-sp-menu-list a').on('click', function () {
12    $('.ham').click();
13  });
14
15  //背景とhamクリックで閉じる
16  $('.ham, .black-bg').on('click', function () {
17    if ($(this).hasClass("open")) {
18      $('.ham').click();
19    }
20  });
21});