jQueryで3階層目をクリックしたときに、3階層目2階層目のプルダウンが閉じる

実現したいこと

jQueryでドロップダウンリスト、3階層目のボタンをクリックした時に、2階層目 3階層目を閉じる仕様にしたいです。

前提

1階層目、2階層目、3階層目多階層でプルダウンリストのスクロールすることができましたが、
3階層目をクリックしたとき、3階層目、2階層目を同時に閉じることができません。
jQueryでどのように対応したら良いのかご教示よろしくお願い致します

発生している問題・エラーメッセージ

エラーメッセージ

該当のソースコード

<ul class="accordion7"> <li> <p class="ac1 konyou_list01"> <a href="#" onClick="return false;" class="konyou_list_txt01 ac1"> 殺菌剤 </a> </p> <ul class="inner abn"> <li class="content1-1"> <p> <a href="#" onClick="return false;" class="konyou_list_txt01"> ア行 </a> </p> <ul class="abn"> <li> <a href="#" onClick="return false;" class="konyou_btn01"> aaaaaaaa </a> </li> <li> <a href="#" onClick="return false;" class="konyou_btn01"> aaaaaaaa </a> </li> <li> <a href="#" onClick="return false;" class="konyou_btn01"> aaaaaaaa </a> </li> <li> <a href="#" onClick="return false;" class="konyou_btn01"> aaaaaaaa </a> </li> <li> <a href="#" onClick="return false;" class="konyou_btn01"> aaaaaaaa </a> </li> <li> <a href="#" onClick="return false;" class="konyou_btn01"> aaaaaaaa </a> </li> <li> <a href="#" onClick="return false;" class="konyou_btn01"> aaaaaaaa </a> </li> <li> <a href="#" onClick="return false;" class="konyou_btn01"> aaaaaaaa </a> </li> <li> <a href="#" onClick="return false;" class="konyou_btn01"> aaaaaaaa </a> </li> <li> <a href="#" onClick="return false;" class="konyou_btn01"> aaaaaaaa </a> </li> </ul> </li> </ul> </li> </ul>

jqeury

1$(function(){ 2 3 //.accordion7の中のp要素がクリックされたら 4 $('.accordion7 p').click(function(){ 5 6 //クリックされた.accordion7の中のp要素に隣接するul要素が開いたり閉じたりする。 7 $(this).next('ul').slideToggle(); 8 9 }); 10 11 //.accordion7の中の.innerの中のli要素の中のp要素がクリックされたら 12 $('.accordion7 .inner li p').click(function() { 13 14 //クリックされた.accordion7の中の.innerの中のli要素の中のp要素の子要素のul要素が開いたり閉じたりする。 15 $(this).children('ul').slideToggle(); 16 17 }); 18 19 });

試したこと

ここに問題に対して試したことを記載してください。

補足情報(FW/ツールのバージョンなど)

ここにより詳細な情報を記載してください。

コメントを投稿

0 コメント