お世話になります。
いま作っているサイトに、縦のアコーディオンメニューをつけようとしています。
jQueryを利用して、
HTML
1<dl id="acMenu"> 2 <dt><a href="#!">メニュー1</a></dt> 3 <dd><a href="http://hoge.net/hoge/">サブメニュー11</a></dd> 4 <dd><a href="http://hoge.net/hoge/">サブメニュー12</a></dd> 5 <dd><a href="http://hoge.net/hoge/">サブメニュー13</a></dd> 6 <dt><a href="#!">メニュー2</a></dt> 7 <dd><a href="http://hoge.net/hoge/">サブメニュー21</a></dd> 8 <dd><a href="http://hoge.net/hoge/">サブメニュー22</a></dd> 9 <dd><a href="http://hoge.net/hoge/">サブメニュー23</a></dd> 10 <dt><a href="#!">メニュー3</a></dt> 11 <dd><a href="http://hoge.net/hoge/">サブメニュー31</a></dd> 12 <dd><a href="http://hoge.net/hoge/">サブメニュー32</a></dd> 13 <dd><a href="http://hoge.net/hoge/">サブメニュー33</a></dd> 14</dl>
JavaScript
1<script> 2 $(function(){ 3 $("#acMenu dt").on("click", function() { 4 $(this).nextUntil("dt","dd").slideToggle("fast"); 5 }); 6 }); 7</script>
CSS
1dl#acMenu{ 2 width:320px; 3 height:auto; 4 overflow:hidden; 5} 6dl#acMenu dt{ 7 display:block; 8} 9 10dl#acMenu dd{ 11 clear:both; 12 display:none; 13}
というコードを書いたところ、クリックしたら開閉するメニューを作ることはできたのですが、「クリック時に『既に開いているメニュー』を閉じる」動作が実装できず困っております。dt直下のddが1つずつしかない場合には、
$(this).next("dd").siblings("dd").slideUp();
を加えれば希望の動作となりますが、ddが複数ある場合はお手上げです。
どなたか良い案もしくは「ここを読め」的資料をご紹介いただけると嬉しいです。
回答3件
あなたの回答
tips
プレビュー