如何解决这个与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; 
}