jquery - 折叠并展开所有

Question

我正在尝试实现展开/折叠所有功能。我有一个可展开项目的列表，右上角有一个按钮，允许用户展开和折叠所有内容。

目前，如果所有内容都一起展开/折叠，我的代码就可以工作，但是当用户展开一些（而不是全部）元素时，我的代码就不能正常工作。它只是切换折叠/展开的元素。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 实际上展开所有/折叠所有？

Answer 1

在不完全剖析您的代码的情况下，我将指出 jQuery 的toggle方法只是将可见性从showto切换，hide反之亦然。如果你只想在一个方向切换，你可以这样做：

.toggle(true)显示和 .toggle(false)隐藏

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

Answer 2

我相信你可以简单地做

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

当切换幻灯片时，这也会为您提供一个不错的上滑/下滑动画。

Answer 3

使用切换将做到这一点。

我不确定我是否完全理解您要查找的内容，但希望这个小示例可以让您顺利上路：

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