Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
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!
Mas como posso fazer para abrir infinitamente?
Pode me dar um exemplo? Obrigado!
Mande ver, irei mudar para área de CSS.
http://www.devinrolsen.com/pure-css-menu-with-infinite-sub-menus-tutorial/
$("ul > li").on("click", function(){
$(this).find("ul").show();
});
Esqueça os IDs, e trabalhe com o seletor > do css3.
Ficará muito mais simples.