質問: Jquery初心者です。 多階層のアコーディオンメニューを作っているのですが、 1階層目をクリックして2階層目を開いた後に、 2階層目のメニューをクリックして、3階層目を開こうとすると、すべて閉じてしまいます。 どうもうまくいかず、ご助言いただいれば幸いです。 ### 該当のソースコード ``` メニュー1 メニュー1-1 メニュー1-1-1 メニュー1-1-2 メニュー1-1-3 メニュー1-2 メニュー1-3 ``` ``` ul{ margin-bottom:35px; } li{ border-bottom:solid 1px #F2F2F2; } li a, li span{ display:block; pointer-events: auto !important; font-size: 14px; text-decoration:none; padding:15px 0; } li span{ font-size: 14px; cursor:pointer; } li span:hover{ opacity:0.8; } li a:before, li span:before{ display:inline-block; content:''; width:14px; height:14px; border-radius:7px; margin-right:9px; vertical-align:middle; background: url(common/images/icon_menu_ar1.png) center center no-repeat; } ul.sec{ display:none; margin:0 0 10px 25px; } .sec li{ border-bottom:0; } .sec li a{ padding:15px 0; } .sec li a:before{ display:inline-block; content:''; width:14px; height:14px; border-radius:7px; margin-right:9px; vertical-align:middle; background: url(common/images/icon_menu_ar2.png) center center no-repeat; } ``` ``` $(function($) { $('#menu span').on('click', function() { $(this).next('ul:not(:animated)').slideToggle(); $(this).children('span').toggleClass('open'); // 他のサブメニューを閉じる $('.sec').not($(this).next('.sec')).slideUp(); $(this).children('span').not($(this).children('span')).removeClass('open'); }); }); ``` ### 試したこと 「// 他のサブメニューを閉じる」以下2行を削除するなどしてみましたが、 現象は変わりませんでした。 他のメニューをクリックすると、自動で開いているメニューを閉じるという今の状態は維持したいと思っています。 どうぞよろしくお願いいたします。
回答: とりあえず > > メニュー1-1 > > > ここのli閉じタグは付けてはダメです 追記 === 自分が開くと、ほかが閉まる ``` $(function() { $('#menu span').on('click', function() { $(this).next('ul').slideToggle(); $(this).closest('li').siblings().find('ul').slideUp(); }); }); ``` ``` メニュー1 メニュー1-1 メニュー1-1-1 メニュー1-1-2 メニュー1-1-3 メニュー1-2 メニュー1-1-1 メニュー1-1-2 メニュー1-1-3 メニュー1-3 メニュー2 メニュー2-1 メニュー2-1-1 メニュー2-1-2 メニュー2-1-3 メニュー2-2 メニュー2-3 ```