scriptで追加したクラスをもう一度クリックした時に削除したいです。

前提・実現したいこと

ハンバーガーメニューを作成しており、
メニューを開いている間はスクロールをさせないために、htmlタグにoverflow: hidden;を指定したクラスを追加するように指定したのですが、
メニューを閉じた時に消すという指定が初心者で分からず大変困っています。
大変お手数おかけしますが教えていただけますと幸いです。

該当のソースコード

script
1$(function() {
2         $('.navbar_toggle').on('click', function () {
3          $(this).toggleClass('open');
4          $('.menu-sp').toggleClass('open');
5          $('html').addClass('scroll-prevent');
6         });
7        });

html
1<header class="d-block d-lg-none l-header menu-bg">
2    <nav>
3        <div class="drawer">
4            <a class="navbar_brand" href="<?php echo esc_url( home_url('') ); ?>"><img src="<?php bloginfo('template_directory'); ?>/assets/common/images/common/logo.svg" alt=""></a>
5            <div class="navbar_toggle">
6            <span class="navbar_toggle_icon"></span>
7            <span class="navbar_toggle_icon"></span>
8            <span class="navbar_toggle_icon"></span>
9            </div>
10        </div>
11        <div class="menu-sp">
12          <ul>
13            <li><a href="#"><strong>SAMPLE</strong></a></li>
14            <li><a href="#"><strong>SAMPLE</strong></a></li>
15            <li><a href="#"><strong>SAMPLE</strong></a></li>
16            <li>
17              <a href="#"><strong>SAMPLE</strong></a>
18              <ul class="child-menu">
19                <li><a href="#">SAMPLE</a></li>
20              </ul>
21            </li>
22            <li>
23              <a href="#"><strong>SAMPLE</strong></a>
24              <ul class="child-menu">
25                <li><a href="#">SAMPLE</a></li>
26              </ul>
27            </li>
28            <li>
29              <a href="#"><strong>SAMPLE</strong></a>
30              <ul class="child-menu">
31                <li><a href="#">SAMPLE</a></li>
32                <li><a href="#">SAMPLE</a></li>
33              </ul>
34            </li>
35            <li>
36              <a href="#"><strong>SAMPLE</strong></a>
37              <ul class="child-menu">
38                <li><a href="#">SAMPLE</a></li>
39              </ul>
40            </li>
41          </ul>
42          <div>
43            <ul class="btn-li-sp">
44              <li>
45                <a href="#" class="button-sp mr-3"><i class="far fa-envelope fa-lg fa-fw"></i> Request document</a>
46              </li>
47            </ul>
48          </div>
49          <div class="tel-menu-sp">
50            <img src="<?php bloginfo('template_directory'); ?>/assets/common/images/common/tel-en.svg" class="w100">
51          </div>
52        </div>
53      </div>
54    </nav>
55    <?php wp_head(); ?>
56</header>

scss
1nav {
2  width: 100%;
3  height: 15vh;
4  position: relative;
5  background: #ffffff;
6  z-index: 9999;
7}
8
9.drawer {
10  display: flex;
11  flex-direction: row;
12  align-items: center;
13  justify-content: space-between;
14  position: relative;
15  height: 15vh;
16  padding: 0 2em;
17}
18
19.navbar_brand {
20  text-align: center;
21  width: 100%;
22
23  img{
24    width: 30vw;
25    margin: 0 0 0 5.5em;
26  }
27}
28
29.navbar_toggle {
30  z-index: 100;
31  padding: 2em;
32}
33
34.navbar_toggle_icon {
35  position: relative;
36  display: block;
37  height: 2px;
38  width: 40px;
39  padding: 0 1.2em;
40  background: #000000;
41  -webkit-transition: ease .5s;
42  transition: ease .5s;
43
44  &:nth-child(1) {
45    top: 0;
46  }
47
48  &:nth-child(2) {
49    margin: 8px 0;
50  }
51
52  &:nth-child(3) {
53    top: 0;
54  }
55}
56
57/*OPEN時の動き*/
58
59.navbar_toggle.open .navbar_toggle_icon {
60  &:nth-child(1) {
61    top: 10px;
62    -webkit-transform: rotate(45deg);
63    transform: rotate(45deg);
64  }
65
66  &:nth-child(2) {
67    -webkit-transform: translateY(-50%);
68    transform: translateY(-50%);
69    opacity: 0;
70  }
71
72  &:nth-child(3) {
73    top: -10px;
74    -webkit-transform: rotate(-45deg);
75    transform: rotate(-45deg);
76  }
77}
78
79.menu-sp {
80  -webkit-transform: translateX(-100%);
81  transform: translateX(-100%);
82  -webkit-transition: ease .5s;
83  transition: ease .5s;
84  background-color: #ff6347;
85  height: 100vh;
86
87  ul {
88    width: 80%;
89    margin: 0 auto;
90    padding: 3em 0;
91
92    li {
93      padding: 1em 0;
94      width: 100%;
95
96      a {
97        color: white;
98        text-decoration: none;
99        font-size: 1.3em;
100      }
101
102      .child-menu{
103        padding: 1em 0;
104        margin: 0 0 0 2em;
105
106        li{
107          padding: 0.5em 0;
108          width: 100%;
109
110          a{
111            color: white;
112            text-decoration: none;
113            font-size: 1.1em;
114          }
115        }
116      }
117    }
118  }
119
120  &.open {
121    -webkit-transform: translateX(0);
122    transform: translateX(0);
123    overflow-y: auto;
124    -webkit-overflow-scrolling: touch;
125    height: 100vh;
126  }
127}
128
129/*OPEN時の動き*/
130
131@media screen and (min-width: 992px) {
132  nav {
133    display: flex;
134    flex-direction: row;
135  }
136
137  .navbar_toggle {
138    display: none;
139  }
140
141  .menu-sp {
142    width: 100%;
143    -webkit-transform: translateX(0);
144    transform: translateX(0);
145
146    ul {
147      height: 70px;
148      display: flex;
149      flex-wrap: wrap;
150      justify-content: flex-end;
151      align-items: center;
152
153      li {
154        padding: 0 1em;
155        border-bottom: none;
156      }
157    }
158  }
159}
160
161.tel-menu-sp{
162  background-color: #ffffff;
163  padding: 2em;
164  width: 80%;
165  margin: 0 auto 3em auto;
166}
167

試したこと

https://qiita.com/Scheme/items/300739f6da6a95e58306
上記のサイトを参考に設定したりしてみたのですがトグルメニューを触っても反応がないなどの状態になりました。

m.ts10806

2020/07/09 09:49

>sqript 「script」かと思います。

m.ts10806

2020/07/09 09:50

しかし、PHPは関係ないのでは？あと、HTML提示願います。 JavaScriptだけでは動作確認できません。

sasaki_0000

2020/07/09 10:03

ご指摘ありがとうございました。 scriptの表記修正致しました。 phpをタグ追加してしまっていた件、phpでサイトを作成していたのでどこまで関係があるのかわからず追加してしまいました。申し訳ございません。削除致しました。 htmlとcss後ほど追記いたします。

m.ts10806

2020/07/09 20:39

むしろ関係するのはWordPressでしたか。厳密には「PHPで作った」とは言えないと思います。あと、SCSSをそのまま提示されてもコンパイルしないといけないなど環境が必要なので、HTMLもですが、「ブラウザから利用されるソース」を提示された方がアドバイスは得やすくなるかと思います

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

回答2件

自己解決

yambejpさまに「クラスの付け外しはできています」のコメントでヒントをいただき下記のように書き換えたところ無事希望の動作になりました！ありがとうございました…！

script
1$(function() {
2         $('.navbar_toggle').on('click', function () {
3          $(this).toggleClass('open');
4          $('.menu-sp').toggleClass('open');
5          $('html').addClass('scroll-prevent');
6         });
7        });

投稿2020/07/10 01:30

sasaki_0000

総合スコア7