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

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

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

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

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

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

Q&A

解決済

2回答

9025閲覧

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

yytop

総合スコア20

メニュー

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

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

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

0グッド

0クリップ

投稿2018/01/26 08:15

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行を削除するなどしてみましたが、
現象は変わりませんでした。
他のメニューをクリックすると、自動で開いているメニューを閉じるという今の状態は維持したいと思っています。
どうぞよろしくお願いいたします。

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

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

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

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

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

guest

回答2

0

ベストアンサー

とりあえず

<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

総合スコア114572

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

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

yytop

2018/01/26 08:48

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

2018/01/26 08:54

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

2018/01/26 09:22

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

2018/01/26 11:45

追記しておきました
yytop

2018/01/26 12:33

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

0

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

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

投稿2018/01/26 11:39

oimo014

総合スコア103

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

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

yytop

2018/01/26 12:36

ありがとうございます! いただいた書き方でも思い通りの動作になりました。 とても丁寧にソースを書いていただき、感謝いたします。m(__)m
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問