多階層アコーディオンメニューの自動開閉について

多階層アコーディオンメニューのメニューの自動開閉部分がうまくいかず困っております。
下記のような方法で、1段目および2段目が横並び、3段目がリスト形式のアコーディオンメニューを作成しました。

HTML
1  <ul class="accordionBox">
2    <li><h3>メニュー1</h3>
3      <ul class="subMenu">
4        <li><h4>サブメニュー1</h4>
5          <ul class="subList">
6            <li><a href="">サブメニュー1-1コンテンツ</a></li>
7            <li><a href="">サブメニュー1-2コンテンツ</a></li>
8         </ul>
9        </li>
10        <li><h4>サブメニュー2</h4>
11          <ul class="subList">
12            <li><a href="">サブメニュー2-1コンテンツ</a></li>
13            <li><a href="">サブメニュー2-2コンテンツ</a></li>
14          </ul>
15        </li>
16        <li><h4>サブメニュー3</h4>
17          <ul class="subList">
18            <li><a href="">サブメニュー3-1コンテンツ</a></li>
19            <li><a href="">サブメニュー3-2コンテンツ</a></li>
20          </ul>
21        </li>
22      </ul><!-- subMenu -->
23    </li>
24    <li><h3>メニュー2</h3>
25      <ul class="subMenu right">
26        <li><h4>サブメニュー1</h4>
27          <ul class="subList">
28            <li><a href="">サブメニュー1-1コンテンツ</a></li>
29            <li><a href="">サブメニュー1-2コンテンツ</a></li>
30          </ul>
31        </li>
32        <li><h4>サブメニュー2</h4>
33          <ul class="subList">
34            <li><a href="">サブメニュー2-1コンテンツ</a></li>
35            <li><a href="">サブメニュー2-2コンテンツ</a></li>
36          </ul>
37        </li>
38        <li><h4>サブメニュー3</h4>
39          <ul class="subList">
40            <li><a href="">サブメニュー3-1コンテンツ</a></li>
41            <li><a href="">サブメニュー3-2コンテンツ</a></li>
42          </ul>
43        </li>
44      </ul><!-- subMenu -->
45    </li>
46  </ul><!-- accordionBox -->
47

css
1ul.accordionBox>li {
2	width: 33%;
3	padding: 1em 0;
4	display: inline-block;
5	float: left;
6}
7
8ul.subMenu {
9	width: 200%;
10}
11
12ul.subMenu>li {
13	width: 33%;
14	display: inline-block;
15	float: left;
16	padding: 1em 0;
17}
18
19ul.right {
20	margin-left: -100%;
21}

javascript
1$(function(){
2	$("ul.subMenu").hide();
3	$("ul.subList").hide();
4	
5	$("ul.accordionBox h3").click(function () {
6		$(this).next("ul.subMenu").slideToggle('fast');
7		$("ul.subMenu").not((this).next("ul.subMenu")).slideUp();
8	});
9	
10	$("ul.subMenu h4").click(function () {
11		$(this).next("ul.subList").slideToggle('fast');
12	});
13	
14});
15

開いている1段目のメニュー以外（メニュー1を開いていたらメニュー2）をクリックしたときにすでに開いているメニューを閉じるようにしたいと考えています。
slideUp()を使って自動開閉するようにしたいのですが、うまくいかず助言を頂ければと思います。
どうぞよろしくお願いいたします。

kei344

2017/04/08 11:32

「うまくできない」とは「何をしたときに」「どうなると思って」「どうなったのか」を、出ているエラーなどと併せて、具体的に記述されたほうが回答を得られやすいと思います。

ryoku

2017/04/08 11:42

確かにうまくいかないではなくもっと具体的に記述すべきですね。次回、質問させていただく際には注意したいと思います。ありがとうございました。

行動規範の内容に同意します

回答1件

ベストアンサー

85行目、(this).next("ul.subMenu")は$(this).next("ul.subMenu")ではないかと。

HTML
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4    <meta charset="utf-8">
5    <title>タイトル</title>
6    <style type="text/css">
7        ul.accordionBox > li {
8            width: 33%;
9            padding: 1em 0;
10            display: inline-block;
11            float: left;
12        }
13
14        ul.subMenu {
15            width: 200%;
16        }
17
18        ul.subMenu > li {
19            width: 33%;
20            display: inline-block;
21            float: left;
22            padding: 1em 0;
23        }
24
25        ul.right {
26            margin-left: -100%;
27        }
28    </style>
29</head>
30<body>
31<ul class="accordionBox">
32    <li><h3>メニュー1</h3>
33        <ul class="subMenu">
34            <li><h4>サブメニュー1</h4>
35                <ul class="subList">
36                    <li><a href="">サブメニュー1-1コンテンツ</a></li>
37                    <li><a href="">サブメニュー1-2コンテンツ</a></li>
38                </ul>
39            </li>
40            <li><h4>サブメニュー2</h4>
41                <ul class="subList">
42                    <li><a href="">サブメニュー2-1コンテンツ</a></li>
43                    <li><a href="">サブメニュー2-2コンテンツ</a></li>
44                </ul>
45            </li>
46            <li><h4>サブメニュー3</h4>
47                <ul class="subList">
48                    <li><a href="">サブメニュー3-1コンテンツ</a></li>
49                    <li><a href="">サブメニュー3-2コンテンツ</a></li>
50                </ul>
51            </li>
52        </ul><!-- subMenu -->
53    </li>
54    <li><h3>メニュー2</h3>
55        <ul class="subMenu right">
56            <li><h4>サブメニュー2-1</h4>
57                <ul class="subList">
58                    <li><a href="">サブメニュー1-1コンテンツ</a></li>
59                    <li><a href="">サブメニュー1-2コンテンツ</a></li>
60                </ul>
61            </li>
62            <li><h4>サブメニュー2-2</h4>
63                <ul class="subList">
64                    <li><a href="">サブメニュー2-1コンテンツ</a></li>
65                    <li><a href="">サブメニュー2-2コンテンツ</a></li>
66                </ul>
67            </li>
68            <li><h4>サブメニュー2-3</h4>
69                <ul class="subList">
70                    <li><a href="">サブメニュー3-1コンテンツ</a></li>
71                    <li><a href="">サブメニュー3-2コンテンツ</a></li>
72                </ul>
73            </li>
74        </ul><!-- subMenu -->
75    </li>
76</ul><!-- accordionBox -->
77<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
78<script>
79    $(function () {
80        $("ul.subMenu").hide();
81        $("ul.subList").hide();
82
83        $("ul.accordionBox h3").click(function () {
84            $(this).next("ul.subMenu").slideToggle('fast');
85            $("ul.subMenu").not($(this).next("ul.subMenu")).slideUp();
86        });
87
88        $("ul.subMenu h4").click(function () {
89            $(this).next("ul.subList").slideToggle('fast');
90        });
91
92    });
93</script>
94</body>
95</html>