mehrere benachbarte divs innerhalb des gleichen Elternelement Auf- und Zuklappen

Question

ich mit diesem Stück Code bin zu kämpfen, und ich bin nicht sicher, ob es überhaupt möglich ist. Ich habe eine Liste von divs innerhalb eines einzigen Elternelements, und ich brauche zu kollabieren und bestimmte Sätze zu erweitern. Hier ein Beispiel:

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

Also, im Ausgangszustand wird .collapse_me sehen sein: keine. Es wird ein Link sein in immer NUR die kollabierten divs unter dieser speziellen .always_show div erweitern zeigen. Ich weiß, das zehn Millionen Mal einfacher wäre, wenn die zusammenklappbare divs in ihrem eigenen div ist, aber ich habe keine Kontrolle über den Code. Ich muss es funktioniert wie jquery verwenden. Möglich?

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

Natürlich sollten Sie nicht meinen ersten Selektor 'div.always_show' verwenden, sondern liefern ihnen das eigentliche Element, das die Eltern des angeklickten Link sein. Zum Beispiel:

$('#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

Sie sollten nicht brauchen jQuery zu verwenden. Es erfordert nur einige clevere CSS:

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

#parent div
{
  display: block;
}

#parent.collapsed
{
    display: block;
}

#parent.collapsed div
{
  display: none;
}

Selektoren werden in der Reihenfolge der Spezifität angewandt. Da ‚# parent.collapsed div‘ spezifischer als ‚#parent div‘ ist, sollte es außer Kraft setzen. Nun, alles, was Sie tun müssen, festgelegt ist die Klasse des übergeordneten div, und du bist fertig. Sie können JavaScript verwenden, um hinzufügen / entfernen ‚kollabiert‘ Klasse der DIV zur Laufzeit Erweiterung ohne zusätzlichen Aufwand zu wechseln:

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