ハンバーガーメニューが非表示にならない。

ハンバーガーメニューを見様見真似で作ったのですが、思う挙動になりません。

①３本のマーク（ハンバーガーメニューのアイコン）をクリック　→　②×になる、sp_navクラスが表示される
→③×をクリック　→　④sp_navクラスが非表示になる、３本のマークが表示される

この挙動にしたいのですが、④でsp_navクラスが非表示になりません。もう一度クリックすると非表示になるのですが、、、何故なのでしょうか。改善策を教えていただきたいです。

判断するのに足りないコード等ありましたら追記しますので、コメントお願いします。

JQuery
1$('.openbtn').on('click',function(){
2    $('.openbtn').toggleClass('active');
3	$('.sp_nav').toggleClass('active');
4    $('.sp_nav.active').fadeToggle(500);
5  });

HTML
1<!--スマホ　ナビゲーション-->
2   <nav class="sp_nav">
3        <ul>
4           <li class="h_nav sp_list">
5               <a href="newlife_top.html">Home</a>
6           </li>
7           <li class="h_nav sp_list">
8               <a href="newlife_news.html">News</a>
9           </li>
10           <li class="h_nav sp_list">
11               <a href="newlife_top.html">Access</a>
12           </li>
13           <li class="h_nav sp_list">
14               <a href="newlife_news.html">Contact</a>
15           </li>
16         </ul>
17  </nav>
18
19<!--ハンバーガーメニュー-->
20<div class="openbtn">
21    <span></span>
22    <span></span>
23    <span></span>
24</div>

CSS
1/*activeクラス付与で線が回転して×になる*/
2.openbtn.active span:nth-of-type(1) {
3    top: 16px;
4    left: 16px;
5    transform: translateY(6px)
6    rotate(-45deg);
7    width: 30%;
8}
9.openbtn.active span:nth-of-type(2) {
10    opacity: 0;
11}
12.openbtn.active span:nth-of-type(3) {
13    top: 28px;
14    left: 16px;
15    transform: translateY(-6px)
16    rotate(45deg);
17    width: 30%;
18}
19.sp_nav {
20    display: none;
21    margin-top: 80px;
22    z-index: 10;
23    width: 100%;
24    height: 100vh;
25    margin-left: auto;
26    color: #efefef;
27    background-color: rgba(225, 244, 247, 0.7);
28}
29.sp_nav ul {
30    width: 100%;
31    height: 100%;
32    padding: calc(((100vh - 75%) - 80px) / 2) 0;
33}

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

回答1件

ベストアンサー

$('.sp_nav.active').fadeToggle(500);だと、activeが付加されているときしか動作しません。

js
1$('.openbtn').on('click',function(){
2    $('.openbtn').toggleClass('active');
3    $('.sp_nav').toggleClass('active');
4    $('.sp_nav').fadeToggle(500);
5  });