ハンバーガーメニュー検証画面でレスポンシブからPC表示にした時、メニューが非表示になる件について。

jQueryでハンバーガーメニューを作成しました。
グーグルクロームの検証画面でレスポンシブにした時正常に動くのですが、ハンバーガーメニューを閉じてから（メニューが非表示の時）PC表示に戻すと、グローバルメニューが非表示になります。
ブラウザを更新すると表示されます。
原因がわかりません。ご教示いただけますと幸いです。
又、ハンバーガーメニューを閉じるときに画面のどこを押してもメニューが閉じるようにしたいです。
無知で申し訳ありません。
宜しくお願い致します。

html
1<!DOCTYPE html>
2<html lang="ja">
3
4<head>
5  <meta charset="UTF-8">
6  <meta name="viewport" content="width=device-width, initial-scale=1.0">
7  <title>ハンバーガーメニュー</title>
8  <link rel="stylesheet" href="css/style.css">
9</head>
10
11<body>
12  <header class="header">
13    <div class="container">
14      <!-- logo -->
15      <div class="area_logo_header">
16        <a class="logo" href="#">
17          <img src="img/logo/logo.svg">
18        </a>
19      </div>
20      <!-- nav -->
21      <nav class="NavMenu">
22        <ul class="list_nav_header">
23          <li>
24            <a href="">お知らせ</a>
25          </li>
26          <li>
27            <a href="">会社概要</a>
28          </li>
29          <li>
30            <a href="">実績</a>
31          </li>
32          <li>
33            <a href="">事業内容</a>
34          </li>
35          <li>
36            <a class="btn_contact" href="">お問い合わせ</a>
37          </li>
38        </ul>
39      </nav>
40      <!-- ハンバーガーメニュー -->
41      <div class="Toggle">
42        <span class="toggle-span"></span>
43        <span></span>
44        <span></span>
45      </div>
46    </div>
47  </header>
48  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
49  <script>
50    $(function () {
51      $('.Toggle').click(function () {
52        $(this).toggleClass('active');
53
54        if ($(this).hasClass('active')) {
55          $('.NavMenu').addClass('active');
56          $('.NavMenu').fadeIn(500);
57        } else {
58          $('.NavMenu').removeClass('active');
59          $('.NavMenu').fadeOut(500);
60        }
61      });
62    });
63  </script>
64</body>
65
66</html>

css
1@charset "utf-8";
2ul,
3li{
4    list-style: none;
5}
6.header {
7  background: #eee;
8}
9
10.header .container {
11  max-width: 1400px;
12  padding: 0 40px;
13  margin: 0 auto;
14  display: flex;
15  align-items: center;
16  height: 80px;
17}
18
19/* ロゴ */
20.area_logo_header .logo {
21  display: block;
22}
23
24.area_logo_header .logo img {
25  height: 25px;
26  vertical-align: bottom;
27}
28
29
30/* ナビゲーション */
31.NavMenu {
32  margin-left: auto;
33}
34
35/* リストナビ */
36.list_nav_header {
37  display: flex;
38  align-items: center;
39}
40
41.list_nav_header>li+li {
42  margin-left: 40px
43}
44
45.list_nav_header a {
46  color: #000;
47  font: 500 15px/1em 'noto sans japanese', sans-serif;
48}
49
50.list_nav_header .btn_contact {
51  color: #000;
52  display: flex;
53  align-items: center;
54  height: 36px;
55  padding: 0 24px 0 48px;
56  background: #0cf;
57  border-radius: 2px;
58  position: relative;
59}
60
61.list_nav_header .btn_contact:before {
62  content: "";
63  display: block;
64  width: 24px;
65  height: 24px;
66  background: url(../img/ico/ico_mail_black.svg) no-repeat center center;
67  background-size: contain;
68  position: absolute;
69  top: 50%;
70  left: 10px;
71  transform: translate(0, -50%);
72}
73
74
75
76@media screen and (max-width: 959px) {
77
78  /*ナビのスタイル*/
79  .NavMenu {
80    display: none;
81    position: fixed;
82    z-index: 12;
83    top: 0;
84    left: 0;
85    background: #399DE6;
86    text-align: center;
87    width: 100%;
88    height: 100%;
89
90  }
91
92  .NavMenu ul {
93    width: 100%;
94    margin: 0 auto;
95    padding: 0;
96    position: absolute;
97    top: 50%;
98    left: 50%;
99    transform: translateY(-50%) translateX(-50%);
100    display: block;
101  }
102
103  .NavMenu ul li {
104    font-size: 24px;
105    list-style-type: none;
106    width: 100%;
107    padding-bottom: 0px;
108    margin-left: 0;
109    margin-bottom: 1em;
110  }
111
112  .NavMenu ul li:last-child {
113    padding-bottom: 0;
114  }
115
116  .NavMenu ul li a {
117    display: block;
118    color: #fff;
119    padding: 15px 0;
120    font-weight: bold;
121    font-size: 18px;
122    display: inline-block;
123  }
124
125  .list_nav_header .btn_contact {
126    color: #fff;
127    display: inline-flex;
128    align-items: center;
129    height: 36px;
130    padding: 0 24px 0 48px;
131    background: initial;
132    border-radius: 2px;
133    position: relative;
134  }
135
136  /*ボタンのスタイル*/
137  .Toggle {
138    position: fixed;
139    right: 18px;
140    top: 3px;
141    width: 45px;
142    height: 45px;
143    cursor: pointer;
144    z-index: 13;
145    display: block;
146  }
147
148  .Toggle span {
149    display: block;
150    position: absolute;
151    width: 35px;
152    border-bottom: solid 4px #C1C1C1;
153    -webkit-transition: .35s ease-in-out;
154    -moz-transition: .35s ease-in-out;
155    transition: .35s ease-in-out;
156    left: 6px;
157  }
158
159  .Toggle span:nth-child(1) {
160    top: 9px;
161  }
162
163  .Toggle span:nth-child(2) {
164    top: 20px;
165  }
166
167  .Toggle span:nth-child(3) {
168    top: 31px;
169  }
170
171  .Toggle.active span:nth-child(1) {
172    top: 18px;
173    left: 6px;
174    -webkit-transform: rotate(-45deg);
175    -moz-transform: rotate(-45deg);
176    transform: rotate(-45deg);
177    border-bottom: solid 3px #C1C1C1;
178  }
179
180  .Toggle.active span:nth-child(2),
181  .Toggle.active span:nth-child(3) {
182    top: 18px;
183    -webkit-transform: rotate(45deg);
184    -moz-transform: rotate(45deg);
185    transform: rotate(45deg);
186    border-bottom: solid 3px #C1C1C1;
187  }

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

回答1件

ベストアンサー

jQueryでハンバーガーメニューを作成しました。

グーグルクロームの検証画面でレスポンシブにした時正常に動くのですが、ハンバーガーメニューを閉じてから（メニューが非表示の時）PC表示に戻すと、グローバルメニューが非表示になります。
ブラウザを更新すると表示されます。
原因がわかりません。ご教示いただけますと幸いです。

まずこの質問ですが、

html
1  <script>
2    $(function () {
3      $('.Toggle').click(function () {
4        $(this).toggleClass('active');
5
6        if ($(this).hasClass('active')) {
7          $('.NavMenu').addClass('active');
8          $('.NavMenu').fadeIn(500);
9        } else {
10          $('.NavMenu').removeClass('active');
11          $('.NavMenu').fadeOut(500);
12        }
13      });
14    });
15  </script>

で、ハンバーガーメニューのクリック時の開閉を行なっていると思いますが、
この、

js
1          $('.NavMenu').fadeOut(500);

が原因でしょう。

これは、cssのスタイルを、透明度を0まで変更して、0になったら、display:noneを直接この$(".NavMenu")の要素のstyle属性へ直接書いてしまいます。

なので、PC表示にしても、$(".NavMenu")の要素のstyle属性に直接書いたdisplay:none;が働き、メニューが表示されなかったのでしょう。

いろんな対策がありますが、一番簡単に解決するなら、

html
1  <script>
2    $(function () {
3      $('.Toggle').click(function () {
4        $(this).toggleClass('active');
5
6        if ($(this).hasClass('active')) {
7          $('.NavMenu').addClass('active');
8          $('.NavMenu').fadeIn(500);
9        } else {
10          $('.NavMenu').removeClass('active');
11          // $('.NavMenu').fadeOut(500);
12          // アニメーション後に、style属性を削除
13          $('.NavMenu').fadeOut(500, function(){
14              $('.NavMenu').removeAttr('style');
15          });
16        }
17      });
18    });
19  </script>

のように直接style属性を削除してしまえばいい思います。

もう一つの質問ですが、

又、ハンバーガーメニューを閉じるときに画面のどこを押してもメニューが閉じるようにしたいです。

無知で申し訳ありません。
宜しくお願い致します。

ですが。画面のどこを押してもということなので、メニューにクリックイベント付けて、

jquery
1      $('.NavMenu').click(function () {
2        if($('.NavMenu').hasClass('active')){
3            $(`.Toggle`).removeClass('active');
4            $('.NavMenu').removeClass('active');
5            $('.NavMenu').fadeOut(500,function(){
6                $('.NavMenu').removeAttr('style');
7            });
8        }  
9      });