Q&A
hoverで表示すればいいだけならcssでよいのでは？
HTML CSS とJSを使用してアコーディオンメニューを作成しています。
３階層目の項目まで表示したいと考えています。
[リンク]https://codepen.io/MrsColombo/pen/mEeQwy
上記のサイトからコードを引っ張ってきて構築しています、
元々２階層までしか表示できない仕様なようなのですが、
J Sを変更して３階層目まで表示したいと考えております。
どこの部分を変更してら良いのかご教授頂けたら幸いです、
よろしくお願いいたします。
html
1<nav class="subArea__nav u-spHide"> 2 <ul class="accordion-menu"> 3 <li> 4 <div class="dropdownlink"><i class="fa fa-road" aria-hidden="true"></i> トロノキスタイル 5 <i class="fa fa-chevron-down" aria-hidden="true"></i> 6 </div> 7 <ul class="submenuItems"> 8 <li><a href="#">「創 - つくる」</a> 9 <ul class="submenuItems2"> 10 <li><a href="#">里山ラグジュアリー</a></li> 11 <li><a href="#">十日町での様々な暮らし</a></li> 12 </ul> 13 </li> 14 <li><a href="#">「暮 - くらす」</a> 15 <ul> 16 <li><a href="#">クラスノービレッジ</a></li> 17 <li><a href="#">宿泊施設</a> 18 <ul> 19 <li><a href="#">トロノキハウス</a></li> 20 <li><a href="#">イーストハウス</a></li> 21 <li><a href="#">ビーチハウス</a></li> 22 <li><a href="#">まつだい棚田ハウス</a></li> 23 </ul> 24 </li> 25 </ul> 26 </li> 27 <li><a href="#">「食 - しょくす」</a> 28 <ul> 29 <li><a href="#">里山馳走</a></li> 30 <li><a href="#">クラスノー・ファーマーズ・デリ</a></li> 31 </ul> 32 </li> 33 <li><a href="#">「癒 - いやす」</a> 34 <ul> 35 <li><a href="#">棚田セラピー</a></li> 36 <li><a href="#">共に創る価値</a></li> 37 <li><a href="#">アグリエーション/農価創造</a></li> 38 </ul> 39 </li> 40 </ul> 41 </li> 42 <li> 43 <div class="dropdownlink"><i class="fa fa-paper-plane" aria-hidden="true"></i>クラスノービレッジ 44 <i class="fa fa-chevron-down" aria-hidden="true"></i> 45 </div> 46 <ul class="submenuItems"> 47 <li><a href="#">クラスノービレッジ</a></li> 48 <li><a href="#">里山パーク</a></li> 49 <li><a href="#">トロノキハウス</a></li> 50 <li><a href="#">古民家オーベルジュ</a></li> 51 <li><a href="#">アクセス</a></li> 52 <li><a href="#">リンク</a></li> 53 <li><a href="#">周辺施設</a></li> 54 </ul> 55 </li> 56 <li> 57 <div class="dropdownlink"><i class="fa fa-quote-left" aria-hidden="true"></i>人然塾 58 <i class="fa fa-chevron-down" aria-hidden="true"></i> 59 </div> 60 <ul class="submenuItems"> 61 <li><a href="#">人然塾</a></li> 62 <li><a href="#">里山アセットマネジメント</a></li> 63 <li><a href="#">健康経営</a></li> 64 <li><a href="#">社会課題解決</a></li> 65 <li><a href="#">ヘルスツーリズム</a></li> 66 <li><a href="#">ワーケーション</a></li> 67 <li><a href="#">地方創生・地域活性化</a></li> 68 </ul> 69 </li> 70 </ul> 71 </nav> 72 </div>
SCSS
1.subArea__nav{ 2 /*アコーディオンメニュー*/ 3 * { 4 margin: 0; 5 padding: 0; 6 } 7 body { 8 font-family: 'Montserrat', sans-serif; 9 background: #ee7b45; 10 } 11 ul { 12 list-style: none; 13 } 14 a { 15 text-decoration: none; 16 color: #fff; 17 } 18 h2 { 19 text-align: center; 20 margin: 20px auto; 21 color: #fff; 22 } 23 .accordion-menu { 24 width: 100%; 25 max-width: 350px; 26 margin: 60px auto 20px; 27 } 28 .accordion-menu li.open .dropdownlink { 29 background: $orange--1; 30 .fa-chevron-down { 31 transform: rotate(180deg); 32 } 33 } 34 .accordion-menu li:last-child .dropdownlink { 35 border-bottom: 0; 36 } 37 .dropdownlink { 38 cursor: pointer; 39 display: block; 40 padding: 15px 15px 15px 45px; 41 font-size: 18px; 42 border-bottom: 1px solid #ccc; 43 color: #fff; 44 position: relative; 45 transition: all 0.4s ease-out; 46 i { 47 position: absolute; 48 top: 17px; 49 left: 16px; 50 } 51 .fa-chevron-down { 52 right: 12px; 53 left: auto; 54 } 55 } 56 .submenuItems { 57 display: none; 58 background: $orange; 59 li { 60 border-bottom: 1px solid #B6B6B6; 61 } 62 } 63 .submenuItems a { 64 display: block; 65 color: #fff; 66 padding: 12px 12px 12px 45px; 67 transition: all 0.4s ease-out; 68 &:hover { 69 background: $orange--1; 70 } 71 } 72 .submenuItems2{ 73 display: none; 74 background: $orange; 75 li { 76 border-bottom: 1px solid #B6B6B6; 77 } 78 } 79 .submenuItems2 a { 80 display: block; 81 color: #fff; 82 padding: 12px 12px 12px 45px; 83 transition: all 0.4s ease-out; 84 &:hover { 85 background: $orange--1; 86 } 87 } 88 89 }
JS
1$(function() { 2 var Accordion = function(el, multiple) { 3 this.el = el || {}; 4 // more then one submenu open? 5 this.multiple = multiple || false; 6 7 var dropdownlink = this.el.find('.dropdownlink'); 8 dropdownlink.on('click', 9 { el: this.el, multiple: this.multiple }, 10 this.dropdown); 11 }; 12 13 Accordion.prototype.dropdown = function(e) { 14 var $el = e.data.el, 15 $this = $(this), 16 //this is the ul.submenuItems 17 $next = $this.next(); 18 19 $next.slideToggle(); 20 $this.parent().toggleClass('open'); 21 22 if(!e.data.multiple) { 23 //show only one menu at the same time 24 $el.find('.submenuItems ').not($next).slideUp().parent().removeClass('open'); 25 } 26 27 } 28 var accordion = new Accordion($('.accordion-menu'), false); 29}) 30
回答1件
0
単純に構造とhoverで処理するとこんな感じです
CSS
1<style> 2.accordion > li:not(:hover) > ul, 3.accordion > li> ul > li:not(:hover) > ul 4{ 5display:none; 6} 7</style> 8<ul class="accordion"> 9<li><a href="#a">A</a> 10<ul> 11<li><a href="#a1">A-1</a> 12<ul> 13<li><a href="#a11">A-1-1</a></li> 14<li><a href="#a12">A-1-2</a></li> 15<li><a href="#a13">A-1-3</a></li> 16</ul> 17</li> 18<li><a href="#a2">A-2</a> 19<ul> 20<li><a href="#a21">A-2-1</a></li> 21<li><a href="#a22">A-2-2</a></li> 22<li><a href="#a23">A-2-3</a></li> 23</ul> 24</li> 25<li><a href="#a3">A-3</a> 26<ul> 27<li><a href="#a31">A-3-1</a></li> 28<li><a href="#a32">A-3-2</a></li> 29<li><a href="#a33">A-3-3</a></li> 30</ul> 31</li> 32</ul> 33</li> 34<li><a href="#b">B</a> 35<ul> 36<li><a href="#b1">B-1</a></li> 37<li><a href="#b2">B-2</a></li> 38<li><a href="#b3">B-3</a></li> 39</ul> 40</li> 41<li><a href="#c">C</a> 42<ul> 43<li><a href="#c1">C-1</a></li> 44<li><a href="#c2">C-2</a></li> 45<li><a href="#c3">C-3</a></li> 46</ul> 47</li> 48</ul>
投稿2022/02/18 05:52
総合スコア117967
あなたの回答
tips
プレビュー
