clickで作動するドロップダウンメニューに曽孫階層を

Question

マウスオンで反応するものでなくクリックするとサブメニューが現れるタイプの多階層ドロップダウンメニューを作る必要に迫られています。

hoverで作動するタイプの3階層〜4階層まで下ることの出来るメニューなら検索するとサンプルがいくつも見つかるのですが、https://codepen.io/R4-D4/pen/jOzNwya このようにclickで作動するものにしようとすると、孫メニューの li タグの内側に更に ul から /ul までの孫メニューをワンセット増設してやれば曽孫メニューも出るだろうと思ったのに出てくれません。

もしかするとスタイルシートの中に li ul li ... といった設定を加えれば良いのかなとも思うのですが、具体的にはどうしたら良いのかわかりません。

曽孫メニューや、もし可能なら更に玄孫メニューも出せるように出来ないでしょうか？

ご教示いただけると幸いです。
どうかよろしくお願い致します。

Answer 1

イベントのバブリングという現象があります。
子要素のクリックの後に、親要素のクリックイベントも発生してしまうという現象です。
まず、それを止める必要があります。

あと、すべての li ul を非表示にしてますが、クリックした子孫要素のみ非表示にするようにしましょう。

上記の点を修正すると下記のようになります。

  $('li').click(function(e) {
    e.stopPropagation(); // 親へのイベントの伝播を止める
    if ($(this).attr('class') == 'selected') {
      // 
      $(this).removeClass('selected').children('ul').animate({
        width: 'hide'
      }, 'fast');
    } else {

      // 子孫要素のみ対象にする
      $(this).find('li').removeClass('selected');
      $(this).find('li ul').hide();

   //以下略

他にも修正点はあると思いますが、とりあえずこれで 曽孫階層は開きます。

Comments

[R4-D4]

早々にありがとうございます。
スタイルシートの設定が悪くて曽孫メニューの垂直位置がおかしい状態ではありますが、おかげさまで一番困っていた部分を突破できました。
曽孫階層を開こうとするメニュー部分をクリックすると孫メニュー全体がリロードされるみたいな動作をするのでおかしいなと思っていたのですが、これがそのバブリングという現象なのですね。
私は何せ元が技術者でないのでサンプルソースの改造で僅かずつ知識を追加するくらいのレベルの人間で、解明は程遠い状態でした。
どうもありがとうございました。

[R4-D4]

ご教示頂いた後、曽孫メニューの出現位置を直そうとCSSを探っていましたが、原因はjsの中にあったようで、
$('#menu').offset().top - 20;
という部分の20を35にすることで、ほぼ問題の無い表示になってきました。