在同一父元素內展開和摺疊多個相鄰的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

回答

相關問題