dl/dt/ddを利用したアコーディオンメニュー: jQueryで「1つ開いたら他が全て閉じる」を実装

Question

お世話になります。

いま作っているサイトに、縦のアコーディオンメニューをつけようとしています。
jQueryを利用して、

<dl id="acMenu">
	<dt><a href="#!">メニュー1</a></dt>
		<dd><a href="http://hoge.net/hoge/">サブメニュー11</a></dd>
		<dd><a href="http://hoge.net/hoge/">サブメニュー12</a></dd>
		<dd><a href="http://hoge.net/hoge/">サブメニュー13</a></dd>
	<dt><a href="#!">メニュー2</a></dt>
		<dd><a href="http://hoge.net/hoge/">サブメニュー21</a></dd>
		<dd><a href="http://hoge.net/hoge/">サブメニュー22</a></dd>
		<dd><a href="http://hoge.net/hoge/">サブメニュー23</a></dd>
	<dt><a href="#!">メニュー3</a></dt>
		<dd><a href="http://hoge.net/hoge/">サブメニュー31</a></dd>
		<dd><a href="http://hoge.net/hoge/">サブメニュー32</a></dd>
		<dd><a href="http://hoge.net/hoge/">サブメニュー33</a></dd>
</dl>

<script>
    $(function(){
        $("#acMenu dt").on("click", function() {
			$(this).nextUntil("dt","dd").slideToggle("fast");
        });
    });
</script>

dl#acMenu{
	width:320px;
	height:auto;
	overflow:hidden;
}
dl#acMenu dt{
	display:block;
}

dl#acMenu dd{
	clear:both;
	display:none;
}

というコードを書いたところ、クリックしたら開閉するメニューを作ることはできたのですが、「クリック時に『既に開いているメニュー』を閉じる」動作が実装できず困っております。dt直下のddが1つずつしかない場合には、
$(this).next("dd").siblings("dd").slideUp();
を加えれば希望の動作となりますが、ddが複数ある場合はお手上げです。
どなたか良い案もしくは「ここを読め」的資料をご紹介いただけると嬉しいです。

Comments

[yambejp]

dtとddが逆？

[Cystidia]

逆でした！　すみません！　本来のコードはdtが上、ddが下になっています。

[kei344]

質問文のコードはそれぞれコードブロックで囲んでいただけませんか？ ```（バッククオート3つ）で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。

[Cystidia]

失礼しました。コードブロックで囲みます。

Answer 1

class指定して、すべて閉じてから動作させればシンプルになります。
やりたいことと違ったらごめんなさい。

HTML

<dl id="acMenu"> 
<dt><a href="#!">メニュー1</a></dt> 
<dd class="close"><a href="http://hoge.net/hoge/">サブメニュー11</a></dd> 
<dd class="close"><a href="http://hoge.net/hoge/">サブメニュー12</a></dd> 
<dd class="close"><a href="http://hoge.net/hoge/">サブメニュー13</a></dd> 
<dt><a href="#!">メニュー2</a></dt> 
<dd class="close"><a href="http://hoge.net/hoge/">サブメニュー21</a></dd> 
<dd class="close"><a href="http://hoge.net/hoge/">サブメニュー22</a></dd> 
<dd class="close"><a href="http://hoge.net/hoge/">サブメニュー23</a></dd> 
<dt><a href="#!">メニュー3</a></dt> 
<dd class="close"><a href="http://hoge.net/hoge/">サブメニュー31</a></dd> 
<dd class="close"><a href="http://hoge.net/hoge/">サブメニュー32</a></dd> 
<dd class="close"><a href="http://hoge.net/hoge/">サブメニュー33</a></dd> 
</dl>

JQuery

$(function() {
	$("#acMenu dt").on("click", function() { 
		$('.close').hide();
		$(this).nextUntil("dt","dd").slideToggle("fast"); 
	}); 
});

Comments

[Cystidia]

ありがとうございます。
表示させるページによってメニューを少しずつ変えようと思っていたので、「クラスをつけておいて該当クラスのみ全閉じ」はとても都合が良かったです。hide()に"fast"を放り込んで、早速使わせて頂きました！

Answer 2

ぱっとおもいつくのはdtからddを順にさがすこと

<script>
$(function(){
  $("#acMenu dd").hide();
  $("#acMenu dt").on('click',function(){
    var n=$(this);
    while(n=n.next()){
      if(n.filter('dd').length==0) break;
      n.toggle();
    };
    $(this).siblings('dt').each(function(){
      var n=$(this);
      while(n=n.next()){
        if(n.filter('dd').length==0) break;
        n.hide();
      };
    })
  });
});
</script>

<dl id="acMenu">
<dt><a href="#!">メニュー1</a></dt>
<dd><a href="http://hoge.net/hoge/">サブメニュー11</a></dd>
<dd><a href="http://hoge.net/hoge/">サブメニュー12</a></dd>
<dd><a href="http://hoge.net/hoge/">サブメニュー13</a></dd>
<dt><a href="#!">メニュー2</a></dt>
<dd><a href="http://hoge.net/hoge/">サブメニュー21</a></dd>
<dd><a href="http://hoge.net/hoge/">サブメニュー22</a></dd>
<dd><a href="http://hoge.net/hoge/">サブメニュー23</a></dd>
<dt><a href="#!">メニュー3</a></dt>
<dd><a href="http://hoge.net/hoge/">サブメニュー31</a></dd>
<dd><a href="http://hoge.net/hoge/">サブメニュー32</a></dd>
<dd><a href="http://hoge.net/hoge/">サブメニュー33</a></dd>
</dl>

追記

よくみればせっかくnextUntil()を利用すればいいですね

$(function(){
  $("#acMenu dd").hide();
  $("#acMenu dt").on('click',function(){
    $(this).siblings("dt").nextUntil("dt","dd").slideUp(); 
    $(this).nextUntil("dt","dd").slideToggle("fast"); 
  });
});

Comments

[Cystidia]

ありがとうございます！
「先に全部閉じる」という発想がなかったのが、そもそもの問題でした。

Answer 3

兄弟の<dt>を探して、それに関係する<dd>を消してやればいいと思う。

$(function(){
    $("#acMenu dt").on("click", function() {
        $(this).nextUntil("dt","dd").slideToggle("fast").end()
        .siblings("dt").nextUntil("dt", "dd").hide();
    });
});

Comments

[Cystidia]

ありがとうございます。
ご回答頂いたような書き方を知らなかったので、勉強になりました！