1

我正在为这段代码苦苦挣扎，我不确定它是否可能。我在单个父元素中有一个 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 将为 display:none。always show 中将有一个链接，仅用于展开特定 .always_show div 下方的折叠 div。我知道如果可折叠的 div 在它们自己的 div 中，这会容易一千万倍，但我无法控制代码。我必须让它像使用 jquery 一样工作。可能的？

4

3 回答 3

3 
$('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-25T19:43:35.250 回答
0 
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-25T19:38:14.530 回答
-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-25T19:39:08.927 回答