レスポンシブ時に、ドロワーメニューとアコーディオンのjavascriptを同時に動かしたい。

Question

初めまして。
現在、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時に動かない状態になってしまいました。

現時点でエラー等は特に出ていなく、それぞれ単体のみであれば動く状況ですが、
ドロワーメニューの、

<div id="rwdMenuWrap">〜</div>のHTML追記部分を記述すると、スマホ時にアコーディオンメニューが動かなくなってしまいます。

なぜ動かないのか、見当がつかない状況でした為、ご質問させていただきました。

もし何か少しでもお分かりの方がいらっしゃいましたら、ぜひご教授ください。
よろしくお願い申し上げます。

Comments

[kei344]

HTMLを質問文に追記いただいたほうが回答を得られやすいと思います。

[uio]

ご指摘いただきありがとうございます。該当部分のHTMLを追加いたしました。不足な点がありまして申し訳ございません。どうぞよろしくお願いいたします。

[kei344]

#rwdMenuWrap #menuList がありませんが、追記途中でしょうか。

[uio]

ご返信ありがとうございます。
＞「#menuList」の部分につきましては、コードの記述が誤っておりました。大変失礼いたしました。只今修正し#globalMenuに変更いたしました。（【ドロワーメニュー】、３行目になります）

＞「#rwdMenuWrap」こちらの部分につきましては、現在のHTMLコードの中に記述はございませんが、【ドロワーメニュー】のjavascripit（13行目）の$('.header-bottom').prepend(〜.... の部分の記述で、SP時に（ブラウザ幅768px以下の際に）HTMLを生成するような形でございました。 このような形でドロワーメニューのボタン（オープンボタン）を生成する形がいいのかどうかわからないですが、問題となっている部分の原因はここのコード生成で発生しているのはわかっておりまして、ただ何が原因で動かなくなっているのかがわからないような状況でした。。

説明がわかりにくいところがありましたら申し訳ございません、
どうぞよろしくお願い致します。

Answer 1

なぜ動かないのか

クリックイベントなどが rwdMenu.html(); の段階で剥がれるからです。（というかイベントを割り当てたものと違うHTMLを .append(menuSouce); で新たに作っていることになる）

なので、jQuery.on で後で追加された要素も含めイベントを受け取ることで解決できると思われます。また、.append(menuSouce); の直後に「アコーディオンメニュー」のコードを入れても動くとは思います。

$( function() { // アコーディオンメニュー
	$( 'body' ).on( 'click', function( ev ) {
		// ev.target がイベントの起こった要素
		var l = $( ev.target ).parents( '#globalMenu' ).length;
		if ( l > 0 ) { // メニュー内のイベントか判定
			$( '.child-list' ).stop( true ).fadeToggle( 100 );
		} else {
			$( '.child-list' ).fadeToggle( 100 ).hide();
		}
	} );
} );

Comments

[uio]

>kei344様

ありがとうございます！

その後、教えていただきましたコードで試してみましたところ、無事に行いたいものができました。再度イベントを受け取る必要があったとは、目からウロコでした。
原因がわかりとてもすっきりいたしました。本当にありがとうございます。

ただ１つ新たな問題が出てきてしまいました。リサイズ時にハンバーガーボタンを押すと、下のアコーディオンメニューのtoggle処理の部分も一緒に実行されてしまいます。

教えていただきましたコードを参考に、以下のようにコードを書いてみたのですが、

$( function() { // アコーディオンメニュー

$('body').on( 'click.click-btn', function( ev ) {
// ev.target がイベントの起こった要素
var l = $( ev.target ).parents( '#globalMenu' ).length;
if ( l > 0 ) { // メニュー内のイベントか判定
$(".click-btn").click(function(){

$( '.child-list' ).toggleClass('open01');
} );
}
} );
} );

上記コードでは、２回「.click-btn」ボタンを押さなければ、下のアコーディオンメニューが開かないという状況になってしまいました。

ev.target がイベントの起こった要素に、.click-btnがクリックされた時の処理を行うということを定義して、比較演算子と論理演算子を入れるといいのかなと考えたのですが、そこもいろいろ試したのですが動きませんでした。。

.click-btnを押したときにのみ、toggle処理を実行するためにはどうしたらいいのでしょうか。。何度も申し訳ございませんが、どうぞよろしくお願い致します。

[uio]

解決いたしました！

$('body').on( 'click.click-btn', function( ev ) {...　
こちらの部分を、$('body').on( 'click','.click-btn', function( ev ) {...　
にしたところ、思い通りの動きになりました。

onを利用した際の書き方がよく理解できていませんでした。

kei344様、この度はご回答いただき、本当にありがとうございました。
これからもjavascriptの勉強頑張ります。