在同一父元素内展开和折叠多个相邻的div

我正在为这一点代码苦苦挣扎，我不确定这是否有可能。我有一个单独的父元素中的div列表，我需要折叠并扩展某些集合。这里有一个例子：在同一父元素内展开和折叠多个相邻的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在他们自己的div中，这将会容易1000万倍，但我无法控制代码。我必须使它像使用jquery一样工作。可能？

来源

2009-09-25 bjork24

$('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()...

来源

2009-09-25 19:43:35 geowa4

这样做。谢谢！ – bjork24 2009-09-25 20:13:08

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

来源

2009-09-25 19:38:14

-1

你不应该需要使用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') 
});

来源

2009-09-25 19:39:08 jrista

我认为他希望它动态可折叠/可展开，而不是静态的CSS。特别是因为它最初将被隐藏起来，并且一个链接将使它们显示出来。 – geowa4 2009-09-25 19:45:00

我明白这一点。我只是提供了CSS的一半问题。使用任何类型的javascript，无论是native，jquery，mootools还是别的，他仍然可以动态添加和移除折叠类到div。通过使用上面的CSS，它大大简化了这个问题。 – jrista 2009-09-25 20:45:21

我认为geowa4对CSS如何被用来简化这个问题的误解是jQuery引入的真正问题之一。人们希望只使用jQuery解决方案来解决问题，使用CSS可以更有效地解决问题，并且只能在CSS失败时使用脚本。不要那么快就抛弃CSS ......它比jQuery处理事情要高效得多。尽可能多地使用CSS，直到无法使用CSS，然后用jquery/script填充GAPS。 – jrista 2009-09-25 20:56:04

在同一父元素内展开和折叠多个相邻的div

回答

相关问题