var arrayjson = [
{
"id": 5,
"nombre": "Electrica",
"id_padre": 0,
"status": true,
"array": [
{
"id": 16,
"nombre": "Termico",
"id_padre": 5,
"status": true
},
{
"id": 15,
"nombre": "Relé",
"id_padre": 5,
"status": true
},
{
"id": 14,
"nombre": "Contactores",
"id_padre": 5,
"status": true
}
]
},
{
"id": 6,
"nombre": "Mecanica",
"id_padre": 0,
"status": true,
"array": [
{
"id": 8,
"nombre": "Motores",
"id_padre": 6,
"status": true
}
]
},
{
"id": 7,
"nombre": "Sellos",
"id_padre": 0,
"status": true
},
{
"id": 9,
"nombre": "Filtro",
"id_padre": 0,
"status": true,
"array": [
{
"id": 10,
"nombre": "Filtro 0,22 U",
"id_padre": 9,
"status": true
},
{
"id": 11,
"nombre": "Filtro Aceite",
"id_padre": 9,
"status": true
},
{
"id": 12,
"nombre": "Filtro De Agua",
"id_padre": 9,
"status": true
}
]
},
{
"id": 13,
"nombre": "Sensores",
"id_padre": 0,
"status": true
},
{
"id": 17,
"nombre": "Croche",
"id_padre": 0,
"status": true,
"array": [
{
"id": 18,
"nombre": "Ajustar",
"id_padre": 17,
"status": true
},
{
"id": 19,
"nombre": "Desajustar",
"id_padre": 17,
"status": true
}
]
},
{
"id": 20,
"nombre": "Picos",
"id_padre": 0,
"status": true,
"array": [
{
"id": 21,
"nombre": "Sujeción",
"id_padre": 20,
"status": true
},
{
"id": 23,
"nombre": "Formacion",
"id_padre": 20,
"status": true
},
{
"id": 22,
"nombre": "Altura",
"id_padre": 20,
"status": true
}
]
}
];
// Genera el Menu Tipo Lista:
html=menuList(arrayjson);
// Agrega el Menu Tipo Lista al DOM (usando jQuery):
$("#listado").html(html)
// agrega la clase "dropList" al Menu Tipo Lista:
.find("ul:first").addClass("dropList");
// crea la Lista Desplegable basado en la clase "dropList":
dropList();
// rutina para crear el Menú Tipo Lista (usando recursividad)
function menuList(menu, l) {
if ( l == undefined)
l=0;
var sp = " ".repeat(l*2);
html = sp + "<ul>\n"
for (n in menu) {
html += sp+" <li>"+menu[n].nombre;
if (menu[n].array) {
html += "\n"+menuList(menu[n].array, l+1, html)+sp+" ";
};
html += "</li>\n";
}
html += sp + "</ul>\n"
return html;
}
// rutina para crear la Lista Desplegable (usando jQuery)
function dropList() {
$('.dropList').find('li:has(ul)')
.addClass('collapseList''collapse')
.click( function(e) {
if (this == e.target) {
$(this).toggleClass('expandList''expand');
$(this).children('ul').toggle();
e.stopPropagation();
}
})
.children('ul').hide();
};
.dropList li {
list-style: none;
cursor: default;
padding-left:20px;
text-indent:-5px;
}
.dropList .collapseListcollapse {
list-style: none;
cursor: pointer;
padding-left:20px;
text-indent:-5px;
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjwhRE9DVFlQRSBzdmcgIFBVQkxJQyAnLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4nICAnaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkJz48c3ZnIGhlaWdodD0iNTEycHgiIGlkPSJMYXllcl8xIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCA1MTIgNTEyOyIgdmVyc2lvbj0iMS4xIiB2aWV3Qm94PSIwIDAgNTEyIDUxMiIgd2lkdGg9IjUxMnB4IiB4bWw6c3BhY2U9InByZXNlcnZlIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj48cGF0aCBkPSJNMTg0LjcsNDEzLjFsMi4xLTEuOGwxNTYuNS0xMzZjNS4zLTQuNiw4LjYtMTEuNSw4LjYtMTkuMmMwLTcuNy0zLjQtMTQuNi04LjYtMTkuMkwxODcuMSwxMDFsLTIuNi0yLjMgIEMxODIsOTcsMTc5LDk2LDE3NS44LDk2Yy04LjcsMC0xNS44LDcuNC0xNS44LDE2LjZoMHYyODYuOGgwYzAsOS4yLDcuMSwxNi42LDE1LjgsMTYuNkMxNzkuMSw0MTYsMTgyLjIsNDE0LjksMTg0LjcsNDEzLjF6Ii8+PC9zdmc+) no-repeat -3px 0px;
background-size: 16px 16px;;
}
.dropList .expandListexpand {
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjwhRE9DVFlQRSBzdmcgIFBVQkxJQyAnLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4nICAnaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkJz48c3ZnIGhlaWdodD0iNTEycHgiIGlkPSJMYXllcl8xIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCA1MTIgNTEyOyIgdmVyc2lvbj0iMS4xIiB2aWV3Qm94PSIwIDAgNTEyIDUxMiIgd2lkdGg9IjUxMnB4IiB4bWw6c3BhY2U9InByZXNlcnZlIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj48cGF0aCBkPSJNOTguOSwxODQuN2wxLjgsMi4xbDEzNiwxNTYuNWM0LjYsNS4zLDExLjUsOC42LDE5LjIsOC42YzcuNywwLDE0LjYtMy40LDE5LjItOC42TDQxMSwxODcuMWwyLjMtMi42ICBjMS43LTIuNSwyLjctNS41LDIuNy04LjdjMC04LjctNy40LTE1LjgtMTYuNi0xNS44djBIMTEyLjZ2MGMtOS4yLDAtMTYuNiw3LjEtMTYuNiwxNS44Qzk2LDE3OS4xLDk3LjEsMTgyLjIsOTguOSwxODQuN3oiLz48L3N2Zz4=);
}
.dropList no.collapse,
.dropList .expand {
cursor: pointer;
background-repeat: no-repeat;
background-position: -3px 0px;
background-size: 16px 16px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
----------------- lista generada por la funcion -----------------
<div id="listado"></div>
----------------- lista que espero obtener de la funcion -----------------
<div>
<li>Electrica
<ul>
<li>Termico</li>
<li>Relé</li>
<li>Contactores</li>
</ul>
</li>
<li>Mecanica
<ul>
<li>Motores</li>
</ul>
</li>
<li>Sellos
</li>
<li>Filtro
<ul>
<li>Filtro 0,22 U</li>
<li>Filtro Aceite</li>
<li>Filtro De Agua</li>
</ul>
</li>
<li>Sensores
</li>
<li>Croche
<ul>
<li>Ajustar</li>
<li>Desajustar</li>
</ul>
</li>
<li>Picos
<ul>
<li>Sujeción</li>
<li>Formacion</li>
<li>Altura</li>
</ul>
</li>
</div>