동일한 부모 요소 내에서 여러 인접 DIV 확장 및 붕괴

Question

나는이 코드로 어려움을 겪고 있으며, 그것이 가능한지 확실하지 않습니다. 단일 상위 요소 내에 DIV 목록이 있으며 특정 세트를 붕괴시키고 확장해야합니다. 예는 다음과 같습니다.

<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가 표시됩니다. Always Show에는 특정 .always_show div 아래에 붕괴 된 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')
});