お世話になります。
HTML
1<ul> 2 <li><a href="#!">リスト1</a></li> 3 <li><a href="#!">リスト2</a> 4 <ul> 5 <li><a href="#!">サブリスト2-1</a></li> 6 <li><a href="#!">サブリスト2-2</a></li> 7 <li><a href="#!">サブリスト2-3</a></li> 8 </ul> 9 </li> 10 <li><a href="#!">リスト3</a> 11 <ul> 12 <li><a href="#!">サブリスト3-1</a></li> 13 <li><a href="#!">サブリスト3-2</a></li> 14 <li><a href="#!">サブリスト3-3</a></li> 15 </ul> 16 </li> 17</ul>
のようなリストがあり、普段は
CSS
1ul li ul{ 2 display:none; 3}
のようにサブリストを隠しています。
このリストを、以前教わった方法と同じように、
- リストをクリックしたら、内包するサブリストを開く(slideToggle)
- 開いているサブリストがあったら全て閉じる(hide)
という動作を期待して、
JavaScript
1$(function(){ 2 $("ul li").on("click", function() { 3 $(this).children().nextUntil().slideToggle("fast").end() 4 .siblings("li").children().nextUntil().hide("fast"); 5 }); 6});
というコードを書いたところ、1) サブリストを開くところまではうまくいったのですが、2) 既に開いているサブリストを閉じることができませんでした。.siblings以下に問題があることは推測できるのですが、考えられる限りで書いたいずれの組み合わせでも、期待する動作は実現できませんでした。
(何も起こらないとか、全て消えるとか、自分の下のリストが全て消えるとか....)
どなたか、正しいコードを御教示いただけると嬉しいです。
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2018/01/20 13:04
2018/01/20 13:08
2018/01/21 01:39
2018/01/21 03:10 編集
2018/01/21 03:17
2018/01/21 06:09