質問編集履歴
2
コードブロックで囲みました。
title
CHANGED
|
@@ -1,1 +1,1 @@
|
|
|
1
|
-
dl/dt/ddを利用したアコーディオンメニュー: jQueryで「1つ開いたら他が全て閉じる」を実装
|
|
1
|
+
dl/dt/ddを利用したアコーディオンメニュー: jQueryで「1つ開いたら他が全て閉じる」を実装
|
body
CHANGED
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
いま作っているサイトに、縦のアコーディオンメニューをつけようとしています。
|
|
4
4
|
jQueryを利用して、
|
|
5
5
|
|
|
6
|
-
HTML
|
|
6
|
+
```HTML
|
|
7
7
|
<dl id="acMenu">
|
|
8
8
|
<dt><a href="#!">メニュー1</a></dt>
|
|
9
9
|
<dd><a href="http://hoge.net/hoge/">サブメニュー11</a></dd>
|
|
@@ -18,8 +18,8 @@
|
|
|
18
18
|
<dd><a href="http://hoge.net/hoge/">サブメニュー32</a></dd>
|
|
19
19
|
<dd><a href="http://hoge.net/hoge/">サブメニュー33</a></dd>
|
|
20
20
|
</dl>
|
|
21
|
-
|
|
22
|
-
|
|
21
|
+
```
|
|
22
|
+
```JavaScript
|
|
23
23
|
<script>
|
|
24
24
|
$(function(){
|
|
25
25
|
$("#acMenu dt").on("click", function() {
|
|
@@ -27,8 +27,8 @@
|
|
|
27
27
|
});
|
|
28
28
|
});
|
|
29
29
|
</script>
|
|
30
|
-
|
|
30
|
+
```
|
|
31
|
-
CSS
|
|
31
|
+
```CSS
|
|
32
32
|
dl#acMenu{
|
|
33
33
|
width:320px;
|
|
34
34
|
height:auto;
|
|
@@ -42,6 +42,7 @@
|
|
|
42
42
|
clear:both;
|
|
43
43
|
display:none;
|
|
44
44
|
}
|
|
45
|
+
```
|
|
45
46
|
|
|
46
47
|
というコードを書いたところ、クリックしたら開閉するメニューを作ることはできたのですが、「クリック時に『既に開いているメニュー』を閉じる」動作が実装できず困っております。dt直下のddが1つずつしかない場合には、
|
|
47
48
|
$(this).next("dd").siblings("dd").slideUp();
|
1
yambejp様からのご指摘に従い、HTMLの誤り\(dtとddが逆\)を修正しました。
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -5,18 +5,18 @@
|
|
|
5
5
|
|
|
6
6
|
HTML:
|
|
7
7
|
<dl id="acMenu">
|
|
8
|
-
<
|
|
8
|
+
<dt><a href="#!">メニュー1</a></dt>
|
|
9
|
-
<
|
|
9
|
+
<dd><a href="http://hoge.net/hoge/">サブメニュー11</a></dd>
|
|
10
|
-
<
|
|
10
|
+
<dd><a href="http://hoge.net/hoge/">サブメニュー12</a></dd>
|
|
11
|
-
<
|
|
11
|
+
<dd><a href="http://hoge.net/hoge/">サブメニュー13</a></dd>
|
|
12
|
-
<
|
|
12
|
+
<dt><a href="#!">メニュー2</a></dt>
|
|
13
|
-
<
|
|
13
|
+
<dd><a href="http://hoge.net/hoge/">サブメニュー21</a></dd>
|
|
14
|
-
<
|
|
14
|
+
<dd><a href="http://hoge.net/hoge/">サブメニュー22</a></dd>
|
|
15
|
-
<
|
|
15
|
+
<dd><a href="http://hoge.net/hoge/">サブメニュー23</a></dd>
|
|
16
|
-
<
|
|
16
|
+
<dt><a href="#!">メニュー3</a></dt>
|
|
17
|
-
<
|
|
17
|
+
<dd><a href="http://hoge.net/hoge/">サブメニュー31</a></dd>
|
|
18
|
-
<
|
|
18
|
+
<dd><a href="http://hoge.net/hoge/">サブメニュー32</a></dd>
|
|
19
|
-
<
|
|
19
|
+
<dd><a href="http://hoge.net/hoge/">サブメニュー33</a></dd>
|
|
20
20
|
</dl>
|
|
21
21
|
|
|
22
22
|
JS:
|