Expandindo e recolhendo vários divs vizinhos dentro do mesmo elemento pai
Pergunta
Estou lutando com esse pedaço de código e não tenho certeza se isso é possível.Tenho uma lista de divs em um único elemento pai e preciso recolher e expandir determinados conjuntos.Aqui está um exemplo:
<div id="parent">
<div class="alway_show">ALWAYS SHOW ME</div>
<div class="collapse_me">COLLAPSIBLE</div>
<div class="collapse_me">COLLAPSIBLE</div>
<div class="collapse_me">COLLAPSIBLE</div>
<div class="alway_show">ALWAYS SHOW ME</div>
<div class="collapse_me">COLLAPSIBLE</div>
<div class="collapse_me">COLLAPSIBLE</div>
<div class="collapse_me">COLLAPSIBLE</div>
</div>
Portanto, no estado inicial, .collapse_me será display:none.Haverá um link em Always Show para expandir SOMENTE os divs recolhidos abaixo daquele .always_show div específico.Eu sei que isso seria dez milhões de vezes mais fácil se os divs recolhíveis estivessem em seu próprio div, mas não tenho controle sobre o código.Eu tenho que fazer funcionar como está usando jquery.Possível?
Solução
$('div.always_show').nextAll().each(function() {
if($(this).is('.collapse_me')) {
$(this).toggle();
}
else {
//this will halt the each "loop", stopping before the next .always_show
return false;
}
});
Claro que você não deve usar meu seletor inicial 'div.always_show'
, mas forneça o elemento real, que será o pai do link clicado.Por exemplo:
$('#expand_anchor').parent().parent().nextAll()...
Outras dicas
var fncdiv = function(){
var el = this;
do{
el = $(el).next();
if ($(el).hasClass("collapse_me") )
$(el).toggle();
else
break;
}while (true)
};
$('#parent div.alway_show').bind("click", fncdiv);
Você não deveria precisar usar jQuery.Requer apenas algum CSS inteligente:
#parent
{
/* normal parent css here */
}
#parent div
{
display: block;
}
#parent.collapsed
{
display: block;
}
#parent.collapsed div
{
display: none;
}
Os seletores são aplicados em ordem de especificidade.Como '#parent.collapsed div' é mais específico que '#parent div', ele deve ser substituído.Agora, tudo que você precisa fazer é definir a classe do div pai e pronto.Você pode usar javascript para adicionar/remover a classe 'recolhida' ao DIV em tempo de execução para alternar a expansão sem nenhum esforço adicional:
// Mootools:
$('parent').addEvent('click', function()
{
$('parent').toggleClass('collapsed')
});