teratail header banner
teratail header banner
質問するログイン新規登録

回答編集履歴

1

追記

2018/01/26 11:45

投稿

yambejp
yambejp

スコア117855

answer CHANGED
@@ -2,4 +2,51 @@
2
2
 
3
3
  > <li><span>メニュー1-1</span></li>
4
4
 
5
- ここのli閉じタグは付けてはダメです
5
+ ここのli閉じタグは付けてはダメです
6
+
7
+ # 追記
8
+
9
+ 自分が開くと、ほかが閉まる
10
+ ```javascript
11
+ $(function() {
12
+ $('#menu span').on('click', function() {
13
+ $(this).next('ul').slideToggle();
14
+ $(this).closest('li').siblings().find('ul').slideUp();
15
+ });
16
+ });
17
+ ```
18
+ ```HTML
19
+ <ul id="menu">
20
+ <li><span>メニュー1</span>
21
+ <ul class="sec">
22
+ <li><span>メニュー1-1</span>
23
+ <ul class="sec">
24
+ <li><a href="#">メニュー1-1-1</a></li>
25
+ <li><a href="#">メニュー1-1-2</a></li>
26
+ <li><a href="#">メニュー1-1-3</a></li>
27
+ </ul>
28
+ </li>
29
+ <li><span>メニュー1-2</span>
30
+ <ul class="sec">
31
+ <li><a href="#">メニュー1-1-1</a></li>
32
+ <li><a href="#">メニュー1-1-2</a></li>
33
+ <li><a href="#">メニュー1-1-3</a></li>
34
+ </ul>
35
+ </li>
36
+ <li><a href="#">メニュー1-3</a></li>
37
+ </ul>
38
+ </li>
39
+ <li><span>メニュー2</span>
40
+ <ul class="sec">
41
+ <li><span>メニュー2-1</span>
42
+ <ul class="sec">
43
+ <li><a href="#">メニュー2-1-1</a></li>
44
+ <li><a href="#">メニュー2-1-2</a></li>
45
+ <li><a href="#">メニュー2-1-3</a></li>
46
+ </ul>
47
+ <li><a href="#">メニュー2-2</a></li>
48
+ <li><a href="#">メニュー2-3</a></li>
49
+ </ul>
50
+ </li>
51
+ </ul>
52
+ ```