Espansione e compressione multipli div vicine all'interno dello stesso elemento genitore

Question

sto lottando con questo pezzo di codice, e non sono sicuro se è ancora possibile. Ho una lista di div all'interno di un singolo elemento padre, e ho bisogno di comprimere ed espandere certi insiemi. Ecco un esempio:

<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>

Quindi, nello stato iniziale, .collapse_me sarà display: none. Ci sarà un collegamento in mostra sempre ad espandersi solo div crollati sotto quel particolare div .always_show. So che questo sarebbe dieci milioni di volte più facile se i div pieghevoli erano nella loro div, ma non avere il controllo sul codice. Devo farlo funzionare come sta usando jQuery. Possibile?

Answer 1

$('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; 
    }
});

Naturalmente non si deve usare il mio 'div.always_show' selettore iniziale, ma piuttosto fornire è l'elemento effettivo, che sarà il padre del link cliccato. Ad esempio:

$('#expand_anchor').parent().parent().nextAll()...

Answer 2

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);

Answer 3

Non dovrebbe essere necessario usare jQuery. Si richiede solo un po 'intelligente CSS:

#parent
{
    /* normal parent css here */
}

#parent div
{
  display: block;
}

#parent.collapsed
{
    display: block;
}

#parent.collapsed div
{
  display: none;
}

I selettori sono applicati in ordine di specificità. Dal momento che '# parent.collapsed div' è più specifico di '#parent div', dovrebbe ignorare. Ora, tutto quello che dovete fare, è impostato classe del div genitore, e il gioco è fatto. È possibile utilizzare JavaScript per aggiungere / rimuovere la classe 'crollato' al DIV in fase di esecuzione per attivare o disattivare espansione senza alcuno sforzo aggiuntivo:

// Mootools:
$('parent').addEvent('click', function()
{
  $('parent').toggleClass('collapsed')
});