nav _openが消えない

前提・実現したいこと

表題の通り、nav_openの_openが消えない
.humbergerと.overlayをクリックしたときに、消したいです。

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

nav_openの_openが消えない

試したこと

何回も下記を確認しましたが、
・nav_openの誤字確認。→なし。
・jq構成→指定したセレクタ
が間違ってないか、メソッドも確認するも、間違いなしでした。

該当のソースコード

HTML
1<!DOCTYPE html>
2<html lang="en">
3<head>
4    <meta charset="UTF-8">
5    <meta http-equiv="X-UA-Compatible" content="IE=edge">
6    <meta name="viewport" content="width=device-width, initial-scale=1.0">
7    <title>極楽亭</title>
8    <link rel="stylesheet" href="css/destyle.css">
9    <link rel="stylesheet" href="css/style.css">
10    <link rel="stylesheet" href="CSS/slick.css">
11    <link rel="stylesheet" href="css/slick-theme.css">
12    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css">
13</head>
14<body>
15    <div class="body-wrapper">
16        <header class="header">
17            <div class="header-left">
18                <h1>
19                   <a href="#"> <img src="./img/logo.png" alt="ヘッダーロゴ"></a>
20                </h1>
21            </div><!-- /.header-left -->
22            <div class="header-right">
23                <nav class="nav">
24                    <ul class="header-list">
25                        <li class="header-item">
26                           <a href="#"> 宿泊予約</a></li><!-- /.header-item -->
27                        <li class="header-item">
28                           <a href="#"> 観光情報<!-- /.header-item --></a></li><!-- /.header-item -->
29                        <li class="header-item">
30                           <a href="#"> よくあるご質問<!-- /.header-item --></a></li><!-- /.header-item -->
31                        <li class="header-item">
32                           <a href="#"> お問い合わせ<!-- /.header-item --></a></li><!-- /.header-item -->
33                    </ul><!-- /.header-list -->
34                </nav><!-- /.nav -->
35                <button aria-controls="js-glabal-menu" aria-expanded="false" class=" humburger" id="js-humburger" type="button"><span class="line"></span><span class="line"></span><span class="line"></span></button>
36            </div><!-- /.header-right -->
37
38        </header><!-- /.header -->
39        <div class="overlay"></div><!-- /.overlay -->

CSS
1@charset "UTF-8";
2/* Color */
3/* Word-color */
4/* btn-color */
5html {
6  font-size: 62.5%;
7}
8
9body {
10  font-size: 1.6rem;
11  color: #fff;
12  min-width: 100vw;
13}
14
15img {
16  width: 100%;
17  height: auto;
18  vertical-align: bottom;
19}
20
21a {
22  text-decoration: none;
23}
24
25li {
26  list-style: none;
27}
28
29section {
30  padding-top: 80px;
31  padding-bottom: 40px;
32}
33
34section:nth-last-child() {
35  padding-bottom: 50px;
36}
37
38@media screen and (min-width: 600px) and (max-width: 1179px) {
39  section {
40    padding-top: 60px;
41  }
42}
43
44@media screen and (max-width: 599px) {
45  section {
46    padding-top: 60px;
47  }
48}
49
50.jp-ttl {
51  margin: 80px auto 40px;
52  font-size: 3.2rem;
53  font-weight: bold;
54  text-align: center;
55}
56
57.en-ttl {
58  margin-bottom: 60px;
59  font-size: 2.0rem;
60  font-weight: bold;
61  text-align: center;
62}
63
64.cmn-btn {
65  background-color: #B8860BEA;
66  width: 155px;
67  height: 35px;
68  border: 3px solid #00000029;
69  margin: 60px  auto 0px;
70}
71
72.cmn-btn > a {
73  display: block;
74  color: #fff;
75  font-size: 1.4rem;
76  text-align: center;
77  line-height: 30px;
78  height: 30px;
79}
80
81.header {
82  background-color: #4D0000;
83  display: -webkit-box;
84  display: -webkit-flex;
85  display: -ms-flexbox;
86  display: flex;
87  -webkit-box-pack: justify;
88  -webkit-justify-content: space-between;
89      -ms-flex-pack: justify;
90          justify-content: space-between;
91  -webkit-box-align: center;
92  -webkit-align-items: center;
93      -ms-flex-align: center;
94          align-items: center;
95}
96
97.header-left h1 {
98  width: 150px;
99  height: 56px;
100}
101
102.header-left h1 > a {
103  padding: 20px 0px 20px 30px;
104}
105
106.header-left h1 > a img {
107  width: 150px;
108  height: 56px;
109}
110
111.header-right {
112  display: -webkit-box;
113  display: -webkit-flex;
114  display: -ms-flexbox;
115  display: flex;
116  -webkit-box-pack: center;
117  -webkit-justify-content: center;
118      -ms-flex-pack: center;
119          justify-content: center;
120  -webkit-box-align: center;
121  -webkit-align-items: center;
122      -ms-flex-align: center;
123          align-items: center;
124}
125
126@media screen and (min-width: 600px) and (max-width: 1179px) {
127  .header-right .nav {
128    position: fixed;
129    z-index: 2;
130    top: 0;
131    left: 0;
132    color: #000;
133    background: #fff;
134    text-align: center;
135    -webkit-transform: translateY(-100%);
136    transform: translateY(-100%);
137    -webkit-transition: all 0.6s;
138    transition: all 0.6s;
139    width: 100%;
140  }
141  .header-right .nav._open {
142    /* このクラスを、jQueryで付与・削除する */
143    -webkit-transform: translateY(0%);
144    transform: translateY(0%);
145  }
146}
147
148@media screen and (max-width: 599px) {
149  .header-right .nav {
150    position: fixed;
151    z-index: 2;
152    top: 0;
153    left: 0;
154    color: #000;
155    background: #fff;
156    text-align: center;
157    -webkit-transform: translateY(-100%);
158    transform: translateY(-100%);
159    -webkit-transition: all 0.6s;
160    transition: all 0.6s;
161    width: 100%;
162  }
163  .header-right .nav._open {
164    /* このクラスを、jQueryで付与・削除する */
165    -webkit-transform: translateY(0%);
166    transform: translateY(0%);
167  }
168}
169
170.header .header-list {
171  display: -webkit-box;
172  display: -webkit-flex;
173  display: -ms-flexbox;
174  display: flex;
175  -webkit-box-pack: justify;
176  -webkit-justify-content: space-between;
177      -ms-flex-pack: justify;
178          justify-content: space-between;
179  -webkit-box-align: center;
180  -webkit-align-items: center;
181      -ms-flex-align: center;
182          align-items: center;
183}
184
185@media screen and (min-width: 600px) and (max-width: 1179px) {
186  .header .header-list {
187    background: #000000;
188    margin: 0 auto;
189    padding: 0;
190    width: 100%;
191  }
192}
193
194@media screen and (min-width: 600px) and (max-width: 1179px) {
195  .header .header-list {
196    display: -webkit-box;
197    display: -webkit-flex;
198    display: -ms-flexbox;
199    display: flex;
200    -webkit-box-orient: vertical;
201    -webkit-box-direction: normal;
202    -webkit-flex-direction: column;
203        -ms-flex-direction: column;
204            flex-direction: column;
205    -webkit-box-pack: justify;
206    -webkit-justify-content: space-between;
207        -ms-flex-pack: justify;
208            justify-content: space-between;
209    -webkit-box-align: center;
210    -webkit-align-items: center;
211        -ms-flex-align: center;
212            align-items: center;
213    margin-top: 45px;
214    margin-bottom: 45px;
215  }
216}
217
218@media screen and (max-width: 599px) {
219  .header .header-list {
220    display: -webkit-box;
221    display: -webkit-flex;
222    display: -ms-flexbox;
223    display: flex;
224    -webkit-box-orient: vertical;
225    -webkit-box-direction: normal;
226    -webkit-flex-direction: column;
227        -ms-flex-direction: column;
228            flex-direction: column;
229    -webkit-box-pack: justify;
230    -webkit-justify-content: space-between;
231        -ms-flex-pack: justify;
232            justify-content: space-between;
233    -webkit-box-align: center;
234    -webkit-align-items: center;
235        -ms-flex-align: center;
236            align-items: center;
237    margin-top: 45px;
238    margin-bottom: 45px;
239  }
240}
241
242.header .header-list .header-item {
243  margin-right: 20px;
244}
245
246@media screen and (min-width: 600px) and (max-width: 1179px) {
247  .header .header-list .header-item {
248    padding: 0;
249    width: 100%;
250  }
251  .header .header-list .header-item:last-child {
252    padding-bottom: 0;
253  }
254}
255
256.header .header-list .header-item:nth-last-child(1) {
257  margin-right: 40px;
258}
259
260.header .header-list .header-item:nth-last-child(1) {
261  margin-right: 40px;
262}
263
264@media screen and (max-width: 599px) {
265  .header .header-list .header-item:nth-last-child(1) {
266    margin-top: 20px;
267  }
268}
269
270.header .header-list .header-item > a {
271  display: block;
272  color: #fff;
273  padding: 1.5em 0;
274  text-decoration: none;
275}
276
277.header .header-list .header-item > a:hover {
278  -webkit-transform: scale(1.2);
279          transform: scale(1.2);
280}
281
282.overlay {
283  content: "";
284  display: block;
285  width: 0;
286  height: 0;
287  background-color: rgba(0, 0, 0, 0.5);
288  position: absolute;
289  top: 0;
290  left: 0;
291  z-index: 2;
292  opacity: 0;
293  -webkit-transition: opacity .5s;
294  transition: opacity .5s;
295}
296
297.overlay._open {
298  width: 100%;
299  height: 90%;
300  opacity: 1;
301  top: 40%;
302}

JQ
1//nav-open
2$(function(){
3  $('.humburger').click(function() {
4    $(this).toggleClass('_open');
5      if($(".humburger").hasClass("_open")){
6        $(this).toggleClass("_open");
7        $('.line').toggleClass("_open");
8        $(".nav").addClass("_open");
9        
10        $('.header-item').addClass("_open");
11        $('.overlay').addClass('_open');
12      }else{
13        $(this).removeClass('_open');
14        $('.nav').removeClass('_open'); 
15         $('.nav_open').removeClass('_open');
16        $('.header-list').removeClass("_open");
17        $('.header-item').removeClass("_open");
18        $('.overlay').removeClass('_open');
19      }
20  });
21
22  
23  $('.overlay').on('click',function(){
24    if($(this).hasClass('_open')){
25      $(this).removeClass('_open');
26      $('.humburger').removeClass('_open');
27      $(span).removeClass('_open');
28      $('nav').removeClass('_open');   
29      $('.nav_open').removeClass('_open');
30     
31    }
32  });
33});

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

回答2件

いつもご回答ありがとうございます！助かります！

投稿2021/12/13 01:24

free_teku

総合スコア103

ベストアンサー

ご提示のコードに、そもそも.nav_openが存在しないのが原因ではないでしょうか。

投稿2021/12/08 01:54

Lhankor_Mhy

総合スコア36117

free_teku

2021/12/08 04:01 編集

ごめんなさい。CSSには、ありますが、addClassではHTMLにもないといけないのでしょうか？ .header-right .nav._open { /* このクラスを、jQueryで付与・削除する */ →humnurgerクリックすると、表示さえれますが ,overlayをクリックするときに消えない。つまりは、overlayのjsに問題があると思っていますが解決できずにいます -webkit-transform: translateY(0%); transform: translateY(0%); }