###前提・実現したいこと
メニューを開いたあと、別のメニューを開いたら、最初に開いたメニューを閉じたいです。
ご教授のほど、よろしくお願い申し上げます。
###発生している問題
メニューを開いたあと、別のメニューを開くと両方のメニューが開かれます。
###HTMLコード
jQuery
1jQuery.noConflict(); 2jQuery(function() { 3 jQuery('.menu').on('click', '.nav-click', function(){ 4 jQuery(this).siblings('.menu__second-level').toggle(); 5 jQuery(this).children('.nav-arrow').toggleClass('nav-rotate'); 6 }); 7});
###HTMLコード
html
1<nav class="left__nav"> 2 <div class="title">CATEGORY</div> 3 <ul class="menu cf" style="display: block;"> 4 <li class="menu__single"><span class="nav-click"><i class="nav-arrow"></i></span> 5 <a href="#">バッグ</a> 6 <ul class="menu__second-level"> 7 <li class="nav-submenu-item"> 8 <a href="#">バッグパック</a> 9 </li> 10 <li class="nav-submenu-item"> 11 <a href="#">ボディーバッグ</a> 12 </li> 13 <li class="nav-submenu-item"> 14 <a href="#">メッセンジャーバッグ</a> 15 </li> 16 <li class="nav-submenu-item"> 17 <a href="#">トートバッグ</a> 18 </li> 19 <li class="nav-submenu-item"> 20 <a href="#">ポーチ・ケース</a> 21 </li> 22 </ul> 23 </li> 24 <li class="menu__single"> 25 <a href="#">アウター</a> 26 </li> 27 <li class="menu__single"><span class="nav-click"><i class="nav-arrow"></i></span> 28 <a href="#">トップス</a> 29 <ul class="menu__second-level"> 30 <li class="nav-submenu-item"> 31 <a href="#">Tシャツ</a> 32 </li> 33 <li class="nav-submenu-item"> 34 <a href="#">シャツ</a> 35 </li> 36 <li class="nav-submenu-item"> 37 <a href="#">スウェット</a> 38 </li> 39 </ul> 40 </li> 41 <li class="menu__single"><span class="nav-click"><i class="nav-arrow"></i></span> 42 <a href="#">ボトムス</a> 43 <ul class="menu__second-level"> 44 <li class="nav-submenu-item"> 45 <a href="#">ショートパンツ</a> 46 </li> 47 <li class="nav-submenu-item"> 48 <a href="#">ロングパンツ</a> 49 </li> 50 <li class="nav-submenu-item"> 51 <a href="#">水着</a> 52 </li> 53 </ul> 54 </li> 55 <li class="menu__single"><span class="nav-click"><i class="nav-arrow"></i></span> 56 <a href="#">ソックス</a> 57 <ul class="menu__second-level"> 58 <li class="nav-submenu-item"> 59 <a href="#">ショート</a> 60 </li> 61 <li class="nav-submenu-item"> 62 <a href="#">ミディアム</a> 63 </li> 64 <li class="nav-submenu-item"> 65 <a href="#">ロング</a> 66 </li> 67 <li class="nav-submenu-item"> 68 <a href="#">レディース</a> 69 </li> 70 </ul> 71 </li> 72 <li class="menu__single"> 73 <a href="#">アンダーウェア</a> 74 </li> 75 <li class="menu__single"> 76 <a href="#">レギンス</a> 77 </li> 78 <li class="menu__single"><span class="nav-click"><i class="nav-arrow"></i></span> 79 <a href="#">小物 / その他</a> 80 <ul class="menu__second-level"> 81 <li class="nav-submenu-item"> 82 <a href="#">小物・雑貨</a> 83 </li> 84 <li class="nav-submenu-item"> 85 <a href="#">ヘッドウエア</a> 86 </li> 87 <li class="nav-submenu-item"> 88 <a href="#">ウォレット</a> 89 </li> 90 </ul> 91 </li> 92 </ul> 93</nav>
###補足情報(言語/FW/ツール等のバージョンなど)
HTML 5
jQuery 1.9.1
回答2件
あなたの回答
tips
プレビュー