スマホ用メニュー内にある、開閉メニューの制御について

前提・実現したいこと

スマホ用メニューの中に、開閉メニューをslideToggleで２つ設置しています。

スマホ用メニューを閉じたときに、開閉メニューの中に開いたものがあっても閉じた状態に戻したいです。

HTML
1<nav id="sp-gnav">
2   <ul class="drawer-main">
3       <li class="drawer-logo"><a href="#"></a></li>
4       <li class="drawer-list"><a href="#">ABOUT</a></li>
5       <li class="drawer-list"><a href="#">MEMBERS</a></li>
6      <li class="drawer-list slideDown"><a href="javascript:void(0);" class="slideButton">ARCHIVE</a>
7           <ul class="subList">
8             <li><a href="#">2017</a></li>
9             <li><a href="#">2016</a></li>
10             <li><a href="#">2015</a></li>
11           </ul>
12      </li>
13      <li class="drawer-list slideDown"><a href="javascript:void(0);" class="slideButton">LINKS</a>
14          <ul class="subList">
15              <li><a href="#">リンク０１</a></li>
16             <li><a href="#"リンク０２</a></li>
17             <li><a href="#">リンク０２</a></li>
18          </ul>
19      </li>                    
20   </ul>
21 </nav>
22

jQuey
1  
2//開閉メニュー
3   $(function() {
4         $('.slideButton').click(function () {
5         $(this).toggleClass("active").next().slideToggle("fast");
6          });
7    });
8
9//スマホ用メニュー
10   $(function() {
11	
12	var menu = $('#menu-hunberger,#sp-gnav,#drawer-mask'), 
13        menuBtnOp = $('#buttonClose'),
14        menuBtnCs = $('#drawer-mask'),
15     
16        body = $(document.body);
17	    
18    $('html').removeClass('scroll-fixed');    
19           
20    menuBtnOp.on('click', function(){
21        body.toggleClass('slideOpen');
22        $('html').toggleClass('scroll-fixed');
23        
24        if (body.hasClass('slideOpen')) {
25            menu.addClass('active');
26               
27        } else {
28            menu.removeClass('active');
29        }
30    });
31    menuBtnCs.on('click', function(){
32        body.toggleClass('slideOpen');
33        $('html').toggleClass('scroll-fixed');
34        
35        if (body.hasClass('slideOpen')) {
36            menu.addClass('active');
37               
38        } else {
39            menu.removeClass('active');
40             
41        }
42    });
43    
44    
45    
46});
47

css
1#sp-gnav {
2    position: fixed;
3    z-index: 101;
4    top: 0;
5    overflow: hidden;
6    height: 100%;
7    color: #222;
8    background-color: transparent;
9    -webkit-transition: left .6s cubic-bezier(0.190, 1.000, 0.220, 1.000);
10    transition: left .6s cubic-bezier(0.190, 1.000, 0.220, 1.000);
11    left: -16.25rem;
12
13}
14
15//クリック後のアニメーション
16#sp-gnav.active {
17    left: 0;
18}
19

試したこと

開閉メニューを開いているときに active のclass名がつくので、それを判定して
スマホ用メニューが閉じているときは、 active をとり、再度slideToggleで閉じさせようとしたのですが、うまくいきませんでした。

また、開閉メニューが両方開いている場合はスマホメニューが閉じたときに、開閉メニューも閉じてくれるのですが、片方だけ開いてる状態だと意図した動きになりません。

x_x

2018/09/25 08:10

「スマホ(用?)メニューを閉じる処理」はどれでしょうか？

goligo

2018/09/25 08:22

閉じる処理は `menu.removeClass('active');`　でactiveのclass名をとることで処理しています。CSSの記述も記載しました。

x_x

2018/09/25 08:40

提示されたコードには「スマホ(用?)メニューを閉じる処理」には開閉メニューを閉じる処理がまったく入っていないと思っていいですかね？

goligo

2018/09/25 08:42

その通りでございます。

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

回答1件

ベストアンサー

JavaScript
1            menu.removeClass('active');
2
3            // add.
4            $('.slideButton.active').removeClass('active').next().slideToggle('fast');