質問編集履歴

2 コードブロックで囲みました。

Cystidia

Cystidia score 12

2017/04/07 14:24  投稿

dl/dt/ddを利用したアコーディオンメニュー: jQueryで「1つ開いたら他が全て閉じる」を実装したい
dl/dt/ddを利用したアコーディオンメニュー: jQueryで「1つ開いたら他が全て閉じる」を実装
お世話になります。
いま作っているサイトに、縦のアコーディオンメニューをつけようとしています。
jQueryを利用して、
HTML:
```HTML
<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>
JS:
```
```JavaScript
<script>
   $(function(){
       $("#acMenu dt").on("click", function() {
           $(this).nextUntil("dt","dd").slideToggle("fast");
       });
   });
</script>
CSS:
```
```CSS
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が複数ある場合はお手上げです。
どなたか良い案もしくは「ここを読め」的資料をご紹介いただけると嬉しいです。
  • jQuery

    9353 questions

    jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

  • メニュー

    37 questions

    メニューは、UIにおける仕組みであり、ユーザに機能の表示と実行する手段を与えます。

1 yambejp様からのご指摘に従い、HTMLの誤り(dtとddが逆)を修正しました。

Cystidia

Cystidia score 12

2017/04/07 13:39  投稿

dl/dt/ddを利用したアコーディオンメニュー: jQueryで「1つ開いたら他が全て閉じる」を実装したい
お世話になります。
いま作っているサイトに、縦のアコーディオンメニューをつけようとしています。
jQueryを利用して、
HTML:
<dl id="acMenu">
   <dd><a href="#!">メニュー1</a></dd>
       <dt><a href="http://hoge.net/hoge/">サブメニュー11</a></dt>
       <dt><a href="http://hoge.net/hoge/">サブメニュー12</a></dt>
       <dt><a href="http://hoge.net/hoge/">サブメニュー13</a></dt>
   <dd><a href="#!">メニュー2</a></dd>
       <dt><a href="http://hoge.net/hoge/">サブメニュー21</a></dt>
       <dt><a href="http://hoge.net/hoge/">サブメニュー22</a></dt>
       <dt><a href="http://hoge.net/hoge/">サブメニュー23</a></dt>
   <dd><a href="#!">メニュー3</a></dd>
       <dt><a href="http://hoge.net/hoge/">サブメニュー31</a></dt>
       <dt><a href="http://hoge.net/hoge/">サブメニュー32</a></dt>
       <dt><a href="http://hoge.net/hoge/">サブメニュー33</a></dt>
   <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>
JS:
<script>
   $(function(){
       $("#acMenu dt").on("click", function() {
           $(this).nextUntil("dt","dd").slideToggle("fast");
       });
   });
</script>
CSS:
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が複数ある場合はお手上げです。
どなたか良い案もしくは「ここを読め」的資料をご紹介いただけると嬉しいです。
  • jQuery

    9353 questions

    jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

  • メニュー

    37 questions

    メニューは、UIにおける仕組みであり、ユーザに機能の表示と実行する手段を与えます。

思考するエンジニアのためのQ&Aサイト「teratail」について詳しく知る