Abrir UL com jQuery
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!
Discussão (4)
Carregando comentários...