Jquery初心者です。
多階層のアコーディオンメニューを作っているのですが、
1階層目をクリックして2階層目を開いた後に、
2階層目のメニューをクリックして、3階層目を開こうとすると、すべて閉じてしまいます。
どうもうまくいかず、ご助言いただいれば幸いです。

該当のソースコード

HTML
1<ul id="menu">
2	<li><span>メニュー1</span>
3		<ul class="sec">
4			<li><span>メニュー1-1</span></li>
5			  <ul class="sec">
6			    <li><a href="#">メニュー1-1-1</a></li>
7			    <li><a href="#">メニュー1-1-2</a></li>
8			    <li><a href="#">メニュー1-1-3</a></li>
9			  </ul>
10			<li><a href="#">メニュー1-2</a></li>
11			<li><a href="#">メニュー1-3</a></li>
12		</ul>
13	</li>
14</ul>

CSS
1ul{
2	margin-bottom:35px;
3	}
4li{
5	border-bottom:solid 1px #F2F2F2;
6	}
7li a,
8li span{
9	display:block;
10	pointer-events: auto !important;
11	font-size: 14px;
12	text-decoration:none;
13	padding:15px 0;
14	}
15li span{
16	font-size: 14px;
17	cursor:pointer;
18	}
19li span:hover{
20	opacity:0.8;
21	}
22li a:before,
23li span:before{
24	display:inline-block;
25	content:'';
26	width:14px;
27	height:14px;
28	border-radius:7px;
29	margin-right:9px;
30	vertical-align:middle;
31	background: url(common/images/icon_menu_ar1.png) center center no-repeat;
32	}
33ul.sec{
34	display:none;
35	margin:0 0 10px 25px;
36	}
37.sec li{
38	border-bottom:0;
39	}
40.sec li a{
41	padding:15px 0;
42	}
43.sec li a:before{
44	display:inline-block;
45	content:'';
46	width:14px;
47	height:14px;
48	border-radius:7px;
49	margin-right:9px;
50	vertical-align:middle;
51	background: url(common/images/icon_menu_ar2.png) center center no-repeat;
52	}

Javascript
1$(function($) {
2	$('#menu span').on('click', function() {
3		$(this).next('ul:not(:animated)').slideToggle();
4		$(this).children('span').toggleClass('open');
5		// 他のサブメニューを閉じる
6		$('.sec').not($(this).next('.sec')).slideUp();
7		$(this).children('span').not($(this).children('span')).removeClass('open');
8	});
9});

試したこと

「// 他のサブメニューを閉じる」以下２行を削除するなどしてみましたが、
現象は変わりませんでした。
他のメニューをクリックすると、自動で開いているメニューを閉じるという今の状態は維持したいと思っています。
どうぞよろしくお願いいたします。

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

回答2件

ベストアンサー

とりあえず

<li><span>メニュー1-1</span></li>

ここのli閉じタグは付けてはダメです

追記

自分が開くと、ほかが閉まる

javascript
1$(function() {
2    $('#menu span').on('click', function() {
3        $(this).next('ul').slideToggle();
4        $(this).closest('li').siblings().find('ul').slideUp();
5    });
6});

HTML
1<ul id="menu">
2    <li><span>メニュー1</span>
3        <ul class="sec">
4            <li><span>メニュー1-1</span>
5              <ul class="sec">
6                <li><a href="#">メニュー1-1-1</a></li>
7                <li><a href="#">メニュー1-1-2</a></li>
8                <li><a href="#">メニュー1-1-3</a></li>
9              </ul>
10            </li>
11            <li><span>メニュー1-2</span>
12              <ul class="sec">
13                <li><a href="#">メニュー1-1-1</a></li>
14                <li><a href="#">メニュー1-1-2</a></li>
15                <li><a href="#">メニュー1-1-3</a></li>
16              </ul>
17            </li>
18            <li><a href="#">メニュー1-3</a></li>
19        </ul>
20    </li>
21    <li><span>メニュー2</span>
22        <ul class="sec">
23            <li><span>メニュー2-1</span>
24              <ul class="sec">
25                <li><a href="#">メニュー2-1-1</a></li>
26                <li><a href="#">メニュー2-1-2</a></li>
27                <li><a href="#">メニュー2-1-3</a></li>
28              </ul>
29            <li><a href="#">メニュー2-2</a></li>
30            <li><a href="#">メニュー2-3</a></li>
31        </ul>
32    </li>
33</ul>

投稿2018/01/26 08:39

編集2018/01/26 11:45

yambejp

総合スコア116443

yytop

2018/01/26 08:48

ありがとうございます！おっしゃる通りここで閉じてはいけませんでした。正しい位置に修正したところ、一瞬３階層目まで開くのですが、すぐに自動で閉じられてしまいます。。最後の階層までは閉じずに開いていてほしいのですが。。

yambejp

2018/01/26 08:54

閉じたり開いたりだけであれば $(function() { $('#menu span').on('click', function() { $(this).next('ul').slideToggle(); }); }); とすればいいような気がしますが、その他のクラスの付け外しは重要なのでしょうか？

yytop

2018/01/26 09:22

ありがとうございます！いただいたソースを試しましたところ、正しく階層が展開して開くようになりました。実際にはメニュー2、メニュー3と親メニューが複数ありまして、例えばメニュー１の子メニュー、孫メニュー・・・と、どんどんクリックして展開していって、メニュー2（親メニュー）をクリックすると、メニュー１をすべて閉じるというようなことは難しいでしょうか。。

yambejp

2018/01/26 11:45

追記しておきました

yytop

2018/01/26 12:33

素晴らしい、ありがとうございます！思ったとおりの動作になりました。今日1日ずっと悩んでいましたので、大変助かりました。m(__)m

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

こちらでどうでしょうか？

html
1<ul id="menu">
2    <li><span>メニュー1</span>
3        <ul class="sec">
4            <li><span>メニュー1-1</span>
5              <ul class="sec">
6                <li><a href="#">メニュー1-1-1</a></li>
7                <li><a href="#">メニュー1-1-2</a></li>
8                <li><a href="#">メニュー1-1-3</a></li>
9              </ul>
10            </li>
11            <li><a href="#">メニュー1-2</a></li>
12            <li><a href="#">メニュー1-3</a></li>
13        </ul>
14    </li>
15    <li><span>メニュー2</span>
16        <ul class="sec">
17            <li><span>メニュー2-1</span>
18              <ul class="sec">
19                <li><a href="#">メニュー2-1-1</a></li>
20                <li><a href="#">メニュー2-1-2</a></li>
21                <li><a href="#">メニュー2-1-3</a></li>
22              </ul>
23            </li>
24            <li><a href="#">メニュー2-2</a></li>
25            <li><a href="#">メニュー2-3</a></li>
26        </ul>
27    </li>
28</ul>

javascript
1$(function(){
2  $('#menu span').click(function(){
3    if($(this).parent('li').parent('ul').hasClass('sec')){
4      $(this).next('ul').slideToggle();
5    } else {
6      if($(this).hasClass('open')){
7        $(this).removeClass('open').next('ul').slideUp();
8      } else {
9        $('.sec').slideUp();
10        $('#menu span').removeClass('open');
11        $(this).addClass('open').next('ul').slideDown();
12      }
13    }
14  });
15});