L'expansion et l'effondrement de plusieurs divs voisins dans le même élément parent

Question

Je me bats avec ce bout de code, et je ne sais pas s'il est même possible. J'ai une liste de divs dans un seul élément parent, et je dois réduire et développer certains ensembles. Voici un exemple:

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

Ainsi, dans l'état initial, .collapse_me sera display: none. Il y aura un lien toujours montrer à ne développer que les divs effondrés ci-dessous qui .always_show particulier div. Je sais que ce serait dix millions de fois plus facile si les divs pliables étaient dans leur propre div, mais je n'ai pas de contrôle sur le code. Je dois le faire fonctionner comme utilise jquery. Possible?

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

Bien sûr, vous ne devriez pas utiliser mon sélecteur initial 'div.always_show', mais fournir plutôt l'élément réel, qui sera le parent du lien cliqué. Par exemple:

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

Vous ne devriez pas avoir besoin d'utiliser jQuery. Il ne nécessite que peu de CSS intelligent:

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

#parent div
{
  display: block;
}

#parent.collapsed
{
    display: block;
}

#parent.collapsed div
{
  display: none;
}

Selectors sont appliquées dans l'ordre de spécificité. Depuis « # parent.collapsed div » est plus spécifique que « #parent div », il faut passer outre. Maintenant, tout ce que vous devez faire, est définie de la classe du div parent, et vous avez terminé. Vous pouvez utiliser javascript pour ajouter / supprimer la classe « effondrés » à la DIV lors de l'exécution pour basculer l'expansion sans aucun effort supplémentaire:

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