質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
メニュー

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

jQuery

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

Q&A

解決済

3回答

8158閲覧

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

Cystidia

総合スコア16

メニュー

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

jQuery

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

0グッド

1クリップ

投稿2017/04/07 04:24

編集2017/04/07 05:24

お世話になります。

いま作っているサイトに、縦のアコーディオンメニューをつけようとしています。
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が複数ある場合はお手上げです。
どなたか良い案もしくは「ここを読め」的資料をご紹介いただけると嬉しいです。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

yambejp

2017/04/07 04:28

dtとddが逆?
Cystidia

2017/04/07 04:37

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

2017/04/07 05:17

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

2017/04/07 05:21

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

回答3

0

ベストアンサー

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"); }); });

投稿2017/04/07 05:23

raichi

総合スコア278

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

Cystidia

2017/04/07 09:54

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

0

ぱっとおもいつくのは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()を利用すればいいですね

javascript

1$(function(){ 2 $("#acMenu dd").hide(); 3 $("#acMenu dt").on('click',function(){ 4 $(this).siblings("dt").nextUntil("dt","dd").slideUp(); 5 $(this).nextUntil("dt","dd").slideToggle("fast"); 6 }); 7}); 8

投稿2017/04/07 04:45

編集2017/04/07 05:42
yambejp

総合スコア114572

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

Cystidia

2017/04/07 09:55

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

0

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

jQuery

1$(function(){ 2 $("#acMenu dt").on("click", function() { 3 $(this).nextUntil("dt","dd").slideToggle("fast").end() 4 .siblings("dt").nextUntil("dt", "dd").hide(); 5 }); 6});

投稿2017/04/07 05:35

larkpia

総合スコア138

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

Cystidia

2017/04/07 09:53

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問