如何修复这个 3 级的 jquery 代码手风琴？

Question

我制作的这款手风琴有 2 个层次。

但我需要把它做成 3 个级别。

我尝试了很多次，但没有成功。

我想知道如何修复这个 jQuery 代码，干杯。

这是 2 个级别的 jQuery 代码 Jsfiddle 这里：http://jsfiddle.net/o7t062ap/30/

jQuery

$(function() {
var Accordion = function(el, multiple) {
    this.el = el || {};
    this.multiple = multiple || false;

    // Variables privadas
    var links = this.el.find('.sidebar');
    // Evento
    links.on('click', {el: this.el, multiple: this.multiple}, this.dropdown)
}
Accordion.prototype.dropdown = function(e) {
    var $el = e.data.el;
        $this = $(this),
        $next = $this.next();

    $next.slideToggle();
    $this.parent().toggleClass('open');

    if (!e.data.multiple) {
        $el.find('.firstSubmenu').not($next).slideUp().parent().removeClass('open');
    };      
}   
var accordion = new Accordion($('#accordion'), false);}

Answer 1

[HTML]

<ul id="accordion" class="accordion"> <li> <ul id="sidebar" div class="sidebar"><i class="1"></i>1</ul> <ul class="firstSubmenu"> <li><a href="#">2</a></li> <ul class="secondSubmenu"> <li><a href="#">3</a></li> <li><a href="#">3</a></li> <li><a href="#">3</a></li> </ul> <li><a href="#">2</a></li> <li><a href="#">2</a></li> <li><a href="#">2</a></li> <li><a href="#">2</a></li> </ul> <ul id="sidebar" div class="sidebar"><i class="2"></i>1</ul> <ul class="firstSubmenu"> <li><a href="#">2</a></li> <ul class="secondSubmenu"> <li><a href="#">3</a></li> <li><a href="#">3</a></li> <li><a href="#">3</a></li> </ul> <li><a href="#">2</a></li> <li><a href="#">2</a></li> <li><a href="#">2</a></li> <li><a href="#">2</a></li> </ul> <ul id="sidebar" div class="sidebar"><i class="2"></i>1</ul> <ul class="firstSubmenu"> <li><a href="#">2</a></li> <ul class="secondSubmenu"> <li><a href="#">3</a></li> <li><a href="#">3</a></li> <li><a href="#">3</a></li> </ul> <li><a href="#">2</a></li> <li><a href="#">2</a></li> <li><a href="#">2</a></li> <li><a href="#">2</a></li> </ul>

Answer 2

[CSS]

* {
margin: 0;
padding: 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}

body {
background: #fff;
font-family: 'Open Sans', Arial, Helvetica, Sans-serif, Verdana, Tahoma;
}

ul {
list-style-type: none;
}

a {
color: #333;
text-decoration: none;
}

/** =======================
 * Contenedor Principal
 ===========================*/


.accordion{
width: 100%;
border: 1px solid #e5e5e5;
background: #FFF;
list-style: none;
white-space: nowrap;
}

.sidebar {
cursor: pointer;
display: block;
padding: 10px 10px 10px 42px;
color: #111;
position: relative;
font-size: 16px;
}

.accordion li i {
position: absolute;
top: 16px;
left: 0px;
padding: 0 10px 0 10px;
background: #fff;
}

.sidebar:hover {
background: #fff;
color: #0099FF;
font-weight: bold;
}

.accordion li.open .sidebar {
color: #0099ff;
font-weight: bold;
}

.accordion li.open i {
color: #0099ff;
}



/* Submenu
 -----------------------------*/

.firstSubmenu {
display: none;
background: #444359;
font-size: 12px;
 }

.firstSubmenu li {
background: #f2f2f2;
 }

.firstSubmenu li a {
display: block;
text-decoration: none;
color: #333;
padding: 12px;
padding-left: 42px;
font-size: 12px;
 }

.firstSubmenu li a:hover {
background: #000;
color: #fff;
font-weight: 300;
}

.sidebar li.open .firstSubmenu {
color: #0099ff;
background: #f2f2f2;
}

.firstSubmenu li.open a {
color: #0099ff;
}

.secondSubmenu {
background: #444359;
font-size: 12px;
 }

.secondSubmenu li {
display: none;
background: #e2e2e2;
}

.secondSubmenu li a {
text-decoration: none;
color: #333;
padding: 12px;
padding-left: 42px;
font-size: 12px;
 }

.secondSubmenu li a:hover {
background: #000;
color: #fff;
font-weight: 300;
}