Расширение и свертывание нескольких соседних разделов в пределах одного родительского элемента

Question

Я борюсь с этим фрагментом кода, и я не уверен, возможно ли это вообще.У меня есть список divs внутри одного родительского элемента, и мне нужно свернуть и развернуть определенные наборы.Вот пример:

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

Итак, в исходном состоянии .collapse_me будет отображать:none .В always show будет ссылка для развертывания ТОЛЬКО свернутых разделов под этим конкретным .always_show div .Я знаю, что это было бы в десять миллионов раз проще, если бы сворачиваемые div были в их собственном div, но у меня нет контроля над кодом.Я должен заставить это работать так, как работает jquery.Возможно?

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

Конечно, вам не следует использовать мой начальный селектор 'div.always_show', но вместо этого предоставьте ему фактический элемент, который будет родительским для ссылки, на которую вы нажали.Например:

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

Вам не нужно будет использовать jQuery.Для этого требуется всего лишь немного умного CSS:

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

#parent div
{
  display: block;
}

#parent.collapsed
{
    display: block;
}

#parent.collapsed div
{
  display: none;
}

Селекторы применяются в порядке специфичности.Поскольку '#parent.collapsed div' более специфичен, чем '#parent div', он должен переопределяться.Теперь все, что вам нужно сделать, это установить класс родительского div, и все готово.Вы можете использовать javascript для добавления / удаления "свернутого" класса в DIV во время выполнения, чтобы переключать расширение без каких-либо дополнительных усилий:

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