Abrir UL com jQuery

[Andrew Marques 47]

Boa tarde galera, tudo certo?

 

Então estou fazendo um sistema de gerenciamento de arquivos, nele tenho as pastas que são criadas com LI, cada LI pode ter subpastas que são novas ULs com LIs dentro, gostaria de fazer algo com jQuery que abra as listas infinitamente.

 

Exemplo das listas:

 

Pasta 1

|- Subpasta 1
|- Subpasta 2

|- Subpasta 2A

|- Subpasta 2A1

|- Subpasta 2B

Pasta 2

Pasta 3

 

Essa é a estrutura, podendo ser infinita.

 

O que fiz só consegui abrir uma.

 

Segue código:

 

<ul>
<li id="pasta_1">
<a href="#" onclick="abre_pasta('1');"><i class="fa fa-folder-o"></i> Documentos</a>
<ul class="sub">
<li>
<a href="#"><i class="fa fa-folder-o"></i> Trabalhos</a>
<ul class="sub">
<li>
<a href="#"><i class="fa fa-folder-o"></i> Trabalhos</a>
</li>
</ul>
</li>
<li><a href="#"><i class="fa fa-folder-o"></i> Outros</a></li>
</ul>
</li>
<li id="pasta_2">
<a href="#" onclick="abre_pasta('2');"><i class="fa fa-folder-o"></i> Documentos</a>
<ul class="sub">
<li><a href="#"><i class="fa fa-file-o"></i> Teste.doc</a></li>
<li><a href="#"><i class="fa fa-file-o"></i> Teste.doc</a></li>
</ul>
</li>
</ul>


<script>
function abre_pasta(id){
var pasta = $("#pasta_"+id).attr("class");
if(pasta == 'aberto'){
$("#pasta_"+id+" ul").slideUp();
$("#pasta_"+id).attr("class", ''); 
$("#pasta_"+id).addClass("fechado");


$("#pasta_"+id+" i").attr('class', '');
$("#pasta_"+id+" i").addClass('fa fa-folder-o');
}else if(pasta == 'fechado' || pasta == '' || pasta == undefined){
$("#pasta_"+id+" ul").slideDown();
$("#pasta_"+id).attr("class", '');
$("#pasta_"+id).addClass("aberto");


$("#pasta_"+id+" i").attr('class', '');
$("#pasta_"+id+" i").addClass('fa fa-folder-open-o');
}
}
</script>

Alguem pode me dar uma ajuda?

 

Obrigado!

 

[William Bruno 1501]

Esqueça os IDs, e trabalhe com o seletor > do css3.

Ficará muito mais simples.

[Andrew Marques 47]

Mas como posso fazer para abrir infinitamente?

 

Pode me dar um exemplo? Obrigado!

[Ted k' 126]

Mande ver, irei mudar para área de CSS.

http://www.devinrolsen.com/pure-css-menu-with-infinite-sub-menus-tutorial/

[William Bruno 1501]

$("ul > li").on("click", function(){

$(this).find("ul").show();

});