前提・実現したいこと
jQueryを用いてタブレット用のドロップダウンメガメニューを作っています。
ドロップダウンした状態でページ内遷移をした際に閉じるように作ろうと思い
ドロップダウンのボタンをクリックで閉じる処理を作りましたが
2回目に同じメニューをドロップダウンで表示しようとしても動きません。
eachの中のslideDownが発動しないためだと思いますが解決策が思いつかずご相談させていただきました。
該当のソースコード
html
1<nav class="header__nav"> 2<ul class="header__nav-list"> 3 <li class="header__nav-list-item"> 4 <a class="header__nav-link">AAAA</a> 5 <ul class="header__nav-sub"> 6 <li class="header__nav-sub-item"><a class="header__nav-sub-link" href="#a1">a1</a></li> 7 <li class="header__nav-sub-item"><a class="header__nav-sub-link" href="#a2">a2</a></li> 8 </ul> 9 </li> 10 <li class="header__nav-list-item"> 11 <a class="header__nav-link">BBBB</a> 12 <ul class="header__nav-sub"> 13 <li class="header__nav-sub-item"><a class="header__nav-sub-link" href="#b1">b1</a></li> 14 <li class="header__nav-sub-item"><a class="header__nav-sub-link" href="#b2">b2</a></li> 15 </ul> 16 </li> 17 <li class="header__nav-list-item"> 18 <a class="header__nav-link">CCCC</a> 19 <ul class="header__nav-sub"> 20 <li class="header__nav-sub-item"><a class="header__nav-sub-link" href="#c1">c1</a></li> 21 <li class="header__nav-sub-item"><a class="header__nav-sub-link" href="#c2">c2</a></li> 22 </ul> 23 </li> 24</ul> 25</nav>
javascript
1 2 var ddmenu = '.header__nav'; 3 $('.header__nav-sub li:has(ul)').doubleTapToGo(); 4 5 $('>ul>li',ddmenu).each(function(){ 6 $(this).hover( 7 function(){ 8 $('>ul',this).stop(true,true).slideDown(200); 9 }, 10 function(){ 11 $('>ul',this).stop(true,true).slideUp(100); 12 } 13 ); 14 }); 15 /* 開いたところから閉じる処理 */ 16 $('>ul>li>ul>li',ddmenu).click(function(){ 17 $('>ul>li>ul',ddmenu).stop(true,true).slideUp(100); 18 });
あなたの回答
tips
プレビュー