###前提・実現したいこと
https://lab.sonicmoov.com/markup/jquery/hamburger-menu/
ここを参考に、jqueryを使用した階層のあるドロワーメニューを作成しております。
実装自体はできたのですが
どこかのメニューを開いた状態で、他のメニューをクリックすると
開いていたメニューが閉じるように変更したいです。
※開いている階層メニューが1つだけの状態
###発生している問題・エラーメッセージ
現在は、メニューを開くと再度クリックしないと閉じない状態です。
参考にしたDEMOがそういうものなので、当たり前なのですが・・・
モバイルですべての項目を開くと、画面外へいってしまうので
ひとつだけが開いた状態に変更したいです。
もしお分かりになる方がいらっしゃいましたら
お手数ですがご回答いただけると助かります。
よろしくお願いいたします。
###該当のソースコード
html
1<div class="btn_hamburger">MENU</div> 2 3 <section id="demo1" class="section_demo section_demo1"> 4 <ul class="section_demo_list"> 5 <li> 6 <h3 class="trigger"><a href="#">カテゴリー1</a></h3> 7 <div class="target"> 8 <ul> 9 <li><a href="#">リンク1</a></li> 10 <li><a href="#">リンク2</a></li> 11 <li><a href="#">リンク3</a></li> 12 </ul> 13 </div> 14 </li> 15 16 <li> 17 <h3 class="trigger"><a href="#">カテゴリー2</a></h3> 18 <div class="target"> 19 <ul> 20 <li><a href="#">リンク1</a></li> 21 <li><a href="#">リンク2</a></li> 22 <li><a href="#">リンク3</a></li> 23 </ul> 24 </div> 25 </li> 26 <li> 27 <h3 class="trigger"><a href="#">カテゴリー3</a></h3> 28 <div class="target"> 29 <ul> 30 <li><a href="#">リンク1</a></li> 31 <li><a href="#">リンク2</a></li> 32 <li><a href="#">リンク3</a></li> 33 </ul> 34 </div> 35 </li> 36 </ul> 37 </section>
javascript
1$(function() { 2 3 var activeClass = 'active'; 4 5 // ハンバーガーボタン 6 function hamburgBtn() { 7 $('.btn_hamburger').on('click', function(event) { 8 $button = $(this); 9 event.preventDefault(); 10 11 $button.find('a').toggleClass(activeClass); 12 $button.next().slideToggle(250); 13 }); 14 }; 15 16 function demo1_2(triggerSelector) { 17 // 引数で指定したトリガーをクリックしたとき、クリックしたトリガーの次の要素を展開 18 $(triggerSelector).on('click', function(event) { 19 $trigger = $(triggerSelector); 20 event.preventDefault(); 21 22 $(this).toggleClass(activeClass); 23 $(this).next().slideToggle(250); 24 }); 25 }; 26 // 実行 27 hamburgBtn(); 28 29 // 引数でトリガーを指定 30 demo1_2('#demo1 .trigger'); 31});
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2017/01/27 06:14
2017/01/27 12:10
2017/01/27 13:54
2017/01/31 12:05