初めまして。
現在、javascriptの参考サイトを見ながら、レスポンシブ時にアコーディオンメニューとドロワーメニューを動かすため、以下のようにプログラムを書いています。
【ドロワーメニュー】
// ドロワーメニュー $(function(){ var rwdMenu = $('#globalMenu'), switchPoint = 768, slideSpeed = 500; var menuSouce = rwdMenu.html(); $(window).load(function(){ function menuSet(){ if(window.innerWidth <= switchPoint){ if(!($('#rwdMenuWrap').length)){ $('.header-bottom').prepend('<div id="rwdMenuWrap"><div id="switchBtnArea"><a href="javascript:void(0);" id="switchBtn"><span></span><span></span><span></span></a></div></div>'); $('#rwdMenuWrap').append(menuSouce); var menuList = $('#rwdMenuWrap > ul'); $('#switchBtn').on('click', function(){ menuList.slideToggle(slideSpeed); $(this).toggleClass('btnClose'); }); } } else { $('#rwdMenuWrap').remove(); } } $(window).on('resize', function(){ menuSet(); }); menuSet(); }); });
【アコーディオンメニュー】
// アコーディオン $(function(){ //クリックイベント $('.product-child .click-btn').click(function(){ $('.child-list').stop(true).fadeToggle(100); }); // マウスカーソルがメニュー上/メニュー外 var over_flg = $('.product-child .click-btn,.child-list').hover(function(){ over_flg = true; }, function(){ over_flg = false; }); // メニュー領域外をクリックしたらメニューを閉じる $('body').click(function() { if (over_flg == false) { $('.child-list').fadeToggle(100).hide(); } }); });
【HTML】
<div class="header-bottom"> <nav class="gnav mainnav" id="globalMenu"> <ul class="list" id="menu"> <li><a href="#">A</a></li> <li><a href="#">B</a></li> <li class="product-child"><span class="click-btn">C</span> <ul class="menu-hidden child-list"> <li><a href="#">D</a></li> <li><a href="#">E</a></li> <li><a href="#">F</a></li> </ul> </li> <li><a href="#">G</a></li> <li><a href="#">H</a></li> <li><a href="#">I</a></li> <li><a href="#">J</a></li> </ul> </nav> </div>
※HTMLの記述が漏れておりました。申し訳ありません。
参考にしているサイト:
http://black-flag.net/jquery/20160119-5897.html
http://php.o0o0.jp/article/jquery-dropdown_menu
上記のコードで、HTML6行目の「C」のボタンをクリックすると、
その直下のulリストがアコーディオンで開くような形にしたいのですが、
PC時は問題なく開くのですが、SP時に動かない状態になってしまいました。
現時点でエラー等は特に出ていなく、それぞれ単体のみであれば動く状況ですが、
ドロワーメニューの、
なぜ動かないのか、見当がつかない状況でした為、ご質問させていただきました。
もし何か少しでもお分かりの方がいらっしゃいましたら、ぜひご教授ください。
よろしくお願い申し上げます。
回答1件
あなたの回答
tips
プレビュー