相同的父元素中展开和折叠多个相邻的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 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;
}

选择器在特异性的顺序应用。由于“＃DIV parent.collapsed”比“#parent DIV”更具体而言，应该重写。现在，所有你需要做的，是集父div的类，就大功告成了。您可以使用JavaScript来添加/删除“崩溃”类的DIV在运行时切换扩展而无需任何额外的努力：

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