多階層のアコーディオンメニューを作りたい。
アコーディオンメニューで３階層目まで表示したい、
例）
PHP HTML CSS JSを使用してアコーディオンメニューをつくっています。
２階層目までしか実装できない。
https://codepen.io/MrsColombo/pen/mEeQwy
コチラのサイトからコードを流用して構築しています。
元々２階層目までしか表示出来ない仕様だったようで、JSを書き換えて
３階層目まで表示できるようにした地です、
ご教授頂けたらと思います、ぜひよろしく御願い致します。
該当するソースコード
<nav class="subArea__nav u-spHide">
<ul class="accordion-menu">
<li>
<div class="dropdownlink"><i class="fa fa-road" aria-hidden="true"></i> テキスト
<i class="fa fa-chevron-down" aria-hidden="true"></i>
</div>
<ul class="submenuItems">
<li><a href="#">テキスト</a>
<ul class="submenuItems2">
<li><a href="#">テキスト</a></li>
<li><a href="#">テキスト</a></li>
</ul>
</li>
<li><a href="#">「テキスト</a>
<ul>
<li><a href="#">テキスト</a></li>
<li><a href="#">テキスト</a>
<ul>
<li><a href="#">テキスト</a></li>
<li><a href="#">テキスト</a></li>
<li><a href="#">テキスト</a></li>
<li><a href="#">テキスト</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">テキスト</a>
<ul>
<li><a href="#">テキスト</a></li>
<li><a href="#">テキスト</a></li>
</ul>
</li>
<li><a href="#">テキスト</a>
<ul>
<li><a href="#">テキスト</a></li>
<li><a href="#">テキスト</a></li>
<li><a href="#">テキスト</a></li>
</ul>
</li>
</ul>
</li>
<li>
<div class="dropdownlink"><i class="fa fa-paper-plane" aria-hidden="true"></i>テキスト
<i class="fa fa-chevron-down" aria-hidden="true"></i>
</div>
<ul class="submenuItems">
<li><a href="#">テキスト</a></li>
<li><a href="#">テキスト</a></li>
<li><a href="#">テキスト</a></li>
<li><a href="#">テキスト</a></li>
<li><a href="#">アクセス</a></li>
<li><a href="#">リンク</a></li>
<li><a href="#">周辺施設</a></li>
</ul>
</li>
<li>
<div class="dropdownlink"><i class="fa fa-quote-left" aria-hidden="true"></i>人然塾
<i class="fa fa-chevron-down" aria-hidden="true"></i>
</div>
<ul class="submenuItems">
<li><a href="#">テキスト</a></li>
<li><a href="#">テキスト</a></li>
<li><a href="#">テキスト</a></li>
<li><a href="#">テキスト</a></li>
<li><a href="#">テキスト</a></li>
<li><a href="#">テキスト</a></li>
<li><a href="#">テキスト</a></li>
</ul>
</li>
</ul>
</nav>
</div>
.subArea__nav{
/*アコーディオンメニュー*/
* {
margin: 0;
padding: 0;
}
body {
font-family: 'Montserrat', sans-serif;
background: #ee7b45;
}
ul {
list-style: none;
}
a {
text-decoration: none;
color: #fff;
}
h2 {
text-align: center;
margin: 20px auto;
color: #fff;
}
.accordion-menu {
width: 100%;
max-width: 350px;
margin: 60px auto 20px;
}
.accordion-menu li.open .dropdownlink {
background: $orange--1;
.fa-chevron-down {
transform: rotate(180deg);
}
}
.accordion-menu li:last-child .dropdownlink {
border-bottom: 0;
}
.dropdownlink {
cursor: pointer;
display: block;
padding: 15px 15px 15px 45px;
font-size: 18px;
border-bottom: 1px solid #ccc;
color: #fff;
position: relative;
transition: all 0.4s ease-out;
i {
position: absolute;
top: 17px;
left: 16px;
}
.fa-chevron-down {
right: 12px;
left: auto;
}
}
.submenuItems {
display: none;
background: $orange;
li {
border-bottom: 1px solid #B6B6B6;
}
}
.submenuItems a {
display: block;
color: #fff;
padding: 12px 12px 12px 45px;
transition: all 0.4s ease-out;
&:hover {
background: $orange--1;
}
}
.submenuItems2{
display: none;
background: $orange;
li {
border-bottom: 1px solid #B6B6B6;
}
}
.submenuItems2 a {
display: block;
color: #fff;
padding: 12px 12px 12px 45px;
transition: all 0.4s ease-out;
&:hover {
background: $orange--1;
}
}
}
$(function() {
var Accordion = function(el, multiple) {
this.el = el || {};
// more then one submenu open?
this.multiple = multiple || false;
var dropdownlink = this.el.find('.dropdownlink');
dropdownlink.on('click',
{ el: this.el, multiple: this.multiple },
this.dropdown);
};
Accordion.prototype.dropdown = function(e) {
var $el = e.data.el,
$this = $(this),
//this is the ul.submenuItems
$next = $this.next();
$next.slideToggle();
$this.parent().toggleClass('open');
if(!e.data.multiple) {
//show only one menu at the same time
$el.find('.submenuItems ').not($next).slideUp().parent().removeClass('open');
}
}
var accordion = new Accordion($('.accordion-menu'), false);
})
0
