Q&A
同階層のメニューは他のメニューを開くと閉じるのでしょうか。
前提・実現したいこと
jQueryを利用したスマホ向けページでのアコーディオンメニューを作成しています。
孫階層まであるメニュー構成で、同じ階層をクリックすると同じ階層で開いているメニューがある場合は、閉じるようなつくりにしたいと考えているのですが、toggleClass がうまく制御できず、.active が取れない挙動になってしまっています。.active を制御することによって、アイコンの切り替えをできるようにしたという趣旨です。
具体的には、開いているメニューはマイナスアイコンを、閉じているメニューはプラスアイコンを表示させるように制御したいと考えています。
発生している問題・エラーメッセージ
特にエラーは発生していません。
同じ要素のクリックを繰り返すことでの toggleClass は制御できているのですが、他の要素をクリックしたときの挙動として、同じ階層の .active をとることができないか考えています。
具体的には、親カテゴリー1のクリックを繰り返す分には、アイコンの切り替えがうまくできているのですが、親カテゴリー1をクリックした後、親カテゴリー2をクリックした場合に、親カテゴリー1のアイコンがプラス表示にならない（.active が取れない）状態です。子カテゴリーにおいても同様な状況です。
該当のソースコード
jQuery
1$(function () { 2 $(".toggle").click(function() { 3 /*$(".toggle").removeClass("active");*/ 4 $(this).toggleClass("active").next(".inner").slideToggle(); 5 $(this).closest("li").siblings().find("ul").slideUp(); 6 }); 7 $(".toggle_child").click(function() { 8 /*$(".toggle_child").removeClass("active");*/ 9 $(this).toggleClass("active").next(".inner .child").slideToggle(); 10 $(this).closest("li").siblings().find("ul").slideUp(); 11 }); 12});
html
1<!DOCTYPE html> 2<html lang="ja" dir="ltr"> 3<head> 4<meta name="viewport" content="width=device-width,initial-scale=0.5,minimum-scale=0.5" /> 5<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> 6<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.12.1/css/all.css"> 7<link rel="stylesheet" href="accordion.css"> 8</head> 9<body> 10<div class="contents"> 11<div class="category"> 12<ul class="accordion_m"> 13 <li> 14 <a class="toggle menu">親カテゴリー1</a> 15 <ul class="inner child child01"> 16 <li><a class="toggle_child menu">子カテゴリー1</a> 17 <ul class="inner child child02"> 18 <li><a class="toggle menu-last">孫カテゴリー1</a></li> 19 <li><a class="toggle menu-last">孫カテゴリー2</a></li> 20 <li><a class="toggle menu-last">孫カテゴリー3</a></li> 21 <li><a class="toggle menu-last">孫カテゴリー4</a></li> 22 </ul> 23 </li> 24 <li><a class="toggle_child menu">子カテゴリ−２</a> 25 <ul class="inner child child02"> 26 <li><a href="#" class="toggle menu-last">孫カテゴリー5</a></li> 27 <li><a href="#" class="toggle menu-last">孫カテゴリー6</a></li> 28 <li><a href="#" class="toggle menu-last">孫カテゴリー7</a></li> 29 <li><a href="#" class="toggle menu-last">孫カテゴリー8</a></li> 30 </ul> 31 </li> 32 <li><a class="toggle_child menu">子カテゴリー3</a> 33 <ul class="inner child child02"> 34 <li><a href="#" class="toggle menu-last">孫カテゴリー9</a></li> 35 <li><a href="#" class="toggle menu-last">孫カテゴリー10</a></li> 36 <li><a href="#" class="toggle menu-last">孫カテゴリー11</a></li> 37 <li><a href="#" class="toggle menu-last">孫カテゴリー12</a></li> 38 </ul> 39 </li> 40 </ul> 41 </li> 42 <li> 43 <a class="toggle menu">親カテゴリー2</a> 44 <ul class="inner child child01"> 45 <li><a class="toggle menu">子カテゴリー4</a> 46 <ul class="inner child child02"> 47 <li><a href="#" class="toggle menu-last">孫カテゴリー13</a></li> 48 <li><a href="#" class="toggle menu-last">孫カテゴリー14</a></li> 49 <li><a href="#" class="toggle menu-last">孫カテゴリー15</a></li> 50 </ul> 51 </li> 52 <li><a class="toggle menu">子カテゴリー5</a></li> 53 <ul class="inner child child02"> 54 <li><a href="#" class="toggle menu-last">孫カテゴリー16</a></li> 55 <li><a href="#" class="toggle menu-last">孫カテゴリー17</a></li> 56 <li><a href="#" class="toggle menu-last">孫カテゴリー18</a></li> 57 </ul> 58 59 </ul> 60 </li> 61</ul> 62</div> 63</div> 64<script src="accordion.js"></script> 65</body> 66</html>
css
1.child { 2 display: none; 3} 4 5.menu:after { 6 font-family: "Font Awesome 5 Free"; 7 position: absolute; 8 top: 50%; 9 right: 20px; 10 margin-top: -7px; 11 content: '\f067'; 12 font-size: 20px; 13 font-weight: 900; 14 15} 16 17.menu.active:after { 18 font-family: "Font Awesome 5 Free"; 19 position: absolute; 20 top: 50%; 21 right: 20px; 22 margin-top: -7px; 23 content: '\f068'; 24 font-size: 20px; 25 font-weight: 900; 26 27} 28 29.contents { 30 width: 100%; 31 margin: 0 auto; 32 padding: 20px 0; 33 font-size: 22pt; 34} 35 36.category { 37 padding: 10px 20px; 38} 39 40ul { 41 list-style-type: none; 42 margin: 0; 43} 44 45.toggle { 46 background: #ccc; 47 color: ; 48 position: relative; 49} 50 51a.toggle { 52 display: block; 53} 54 55.toggle_child { 56 background: #ccc; 57 color: ; 58 position: relative; 59} 60 61a.toggle_child { 62 display: block; 63} 64 65.menu { 66 padding: 10px; 67 margin: 5px 0 0; 68} 69 70.child { 71 background: #fff; 72} 73 74.child li { 75 margin: 4px 0; 76} 77 78.child .menu { 79 background: #eaeaea; 80 color: #5e5e5e; 81} 82 83.child01 { 84 padding-left: 40px; 85} 86 87.child01 li { 88 margin: 4px 0; 89} 90 91.child02 { 92 padding-left:40px; 93} 94 95.menu-last { 96 background: #fff; 97 padding: 10px; 98 margin: 5px 0 0; 99 color: #03c; 100}
試したこと
階層ごとに制御したほうがいいのかと思い、階層ごとに処理を分けているつもりです。
補足情報
いろいろ検索したうえでのソースとなっていること、個人的にJavaScriptの理解度は低いため正しい記述なのかどうかは不明です。また、孫カテゴリーからさらに階層が下がることは現状考えていません。
回答2件
0
自己解決
いくつか試してなんとか解決できました。
ifで .active のありなしを確認して、ある場合とない場合で処理をわけるようにしました。
下層メニューでclassを分けていましたが、分けなくても動作することがわかりましたので、ひとつの処理にしています。
以下ソースです。
jQuery
1$(function () { 2 $(".toggle").click(function() { 3 if($(this).hasClass(".active")) { 4 $(".toggle").removeClass("active"); 5 $(this).toggleClass("active").next(".inner").slideToggle(); 6 $(this).closest("li").siblings().find("ul").slideUp(); 7 } else { 8 $(this).toggleClass("active").next(".inner").slideToggle(); 9 $(this).closest("li").siblings().find("ul").slideUp(); 10 $(this).closest("li").siblings().find("a").removeClass("active"); 11 } 12 }); 13});
以上ご参考まで。
投稿2020/05/17 08:35
総合スコア0
0
同階層のメニューは常にひとつのみが開くようにしたいと思っています。
$(".toggle").click 時にクリックされた.toggle要素自体に.activeクラスが付いているか確認して、
付いていたら今のままのコード。
付いていなかったら.activeクラスが付いている.toggle要素を探して、クラスの付け替えと.slideUp()を行い、今のままのコードも実行。
こんな感じでできると思います。
投稿2020/05/17 04:55
総合スコア69606
あなたの回答
tips
プレビュー
