摺疊並展開全部

我試圖實現展開/摺疊所有功能。我有一個可擴展項目的列表，右上角有一個按鈕，允許用戶展開和摺疊所有內容。摺疊並展開全部

目前，如果所有內容一起展開/摺疊，但我的代碼在用戶擴展一些（而不是全部）元素時無法正常工作。它只是切換摺疊/展開的元素。 JSFiddle

這裏是我的jQuery代碼正在運行：

$('div.srcprojects').hide(); 
$('.projectscontainer').on("click", "span.destproject", function(){ 
    $(this).siblings('.srcprojects').toggle().end().siblings('div.destarrow').toggleClass("arrow-right arrow-down"); 
}).on("click", "div.destarrow", function(){ 
    $(this).parent().find("span.destproject").trigger("click"); 
}); 

$('body').on("click", "span#expandcollapse", function(){ 
    $(this).text(function(i, currentText){ 
     return currentText === 'Expand All' ? 'Collapse All' : 'Expand All'; 
    }); 
    $('body').find("span.destproject").trigger("click"); 
});

我怎樣才能使它所以我#expandcollapse實際上擴展所有/摺疊所有？

來源

2013-03-20 theintellects

正如Steve在他的回答中指出的那樣，每次撥動開關時，都會根據項目的當前狀態從「隱藏」狀態切換到「顯示」狀態。要達到所需效果，需要在摺疊時在每個可用的可見元素上運行.hide（），在展開時運行.show（）。 - 或使用切換（true）/切換（false）。 – BrianHall 2013-03-20 22:32:44

沒有完全disecting你的代碼，我只是指出jQuery的toggle方法只是將show的可見性切換爲hide，反之亦然。如果你只是想在一個方向進行切換，你可以這樣做：

.toggle(true)顯示和 .toggle(false)隱藏

http://api.jquery.com/toggle/#toggle-showOrHide

來源

2013-03-20 22:22:33 Steve

謝謝，這工作！仍然無法弄清楚如何讓我的箭頭正確對齊時按下按鈕，但... – theintellects 2013-03-21 01:19:57

使用切換將做到這一點。

我不知道我知道你在尋找什麼，但我希望這個小例子可以讓你在有你的方式：

$('#expandcollapse').click(function() { 
    $('.projectscontainer').each(function() { 
     //Code to manipulate the elements here, like .show()/.hide() 
    }); 
});

來源

2013-03-20 22:18:20 Mackan

我相信，你可以簡單地做

$("#expandcollapse").on("click",function(e) { 
    $(".projectscontainer").find(".srcprojects").toggleSlide(); 
});

這當幻燈片切換時也會給你一個很好的上/下動畫。

來源

2013-03-20 22:43:51 TJC

摺疊並展開全部

回答

相關問題