お世話になります。
現在、レスポンシブ時にPC時とSP時で、アコーディオンメニューの動きを少し変えたく、
以下のようにプログラムを書いています。
【アコーディオンメニュー】
// アコーディオンメニュー $(window).on('load resize', function(){ $('body').on( 'click','.click-btn', function( ev ) { // ev.target がイベントの起こった要素 var l = $( ev.target ).parents( '#globalMenu' ).length; if ( l > 0 ) { // メニュー内のイベントか判定 $( '.child-list' ).toggleClass('open01'); 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').removeClass('open01'); } }); } } ); } );
【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> </ul> </nav> </div>
先日、こちらで同様の質問させていただいたのですが、(https://teratail.com/questions/41408)
その際、SP時に動かない原因をご指摘いただき、無事に解決までできた状態でしたが、
その後、その動きに一つ新たな動きを追加しようとしたところまた動かなくなってしまいました。
追加で実装したい動きは、
PC/SPでは、【HTML】6行目「C」ボタンを押した際に、通常通りアコーディオンを表示し、
PCでは、アコーディオンメニュー領域外をクリックするとアコーディオンメニューが閉じる、
SPでは、領域外クリックで閉じる動きはしない、
という動きを取り入れたいと思っております。
【PC/SPで動作可能なjavascript】(領域外で閉じる動作なし)
$( function() { // アコーディオンメニュー $('body').on( 'click','.click-btn', function( ev ) { // ev.target がイベントの起こった要素 var l = $( ev.target ).parents( '#globalMenu' ).length; if ( l > 0 ) { // メニュー内のイベントか判定 $( '.child-list' ).toggleClass( 'open01' ); } else { $( '.child-list' ).removeClass( 'open01' ); } } ); } );
現状では、1度のみの処理であればPC/SP共に動くのですが、
2回目以降の処理がされない状況です。
例えばPC時で一度アコーディオンメニューを開くと、SPリサイズ時に動かくなってしまうという状況です。
リセット処理がうまくいっていないのかと思い、
$(window).on('load resize'...を入れてみたのですが、動きませんでした。
もし何か少しでもお分かりの方がいらっしゃいましたら、ぜひご教授ください。
どうぞよろしくお願い申し上げます。
//--------
※ブラウザ幅指定のコードが抜けておりました、申し訳ございません。
追加いたしました。
$(window).on('load resize', function(){ $('body').on( 'click','.click-btn', function( ev ) { // ev.target がイベントの起こった要素 var l = $( ev.target ).parents( '#globalMenu' ).length; if ( l > 0 ) { // メニュー内のイベントか判定 $( '.child-list' ).toggleClass('open01'); if(window.innerWidth > 768){ var over_flg = true; $('.click-btn,.child-list').hover(function(){ over_flg = true; }, function(){ over_flg = false; }); // メニュー領域外をクリックしたらメニューを閉じる $('body').click(function() { if (over_flg == false) { $('.child-list').removeClass('open01'); } }); } } } ); } );
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2016/07/19 07:41 編集
2016/07/19 07:49
2016/07/19 08:23 編集
2016/07/19 08:55
2016/07/19 09:14 編集
2016/07/19 10:01
2016/07/19 10:03
2016/07/19 10:13
2016/07/19 11:52