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方法只是将可见性从show切换到hide，反之亦然。如果您只想向一个方向切换，可以执行以下操作：

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

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

Answer 2

使用切换可以做到这一点。

我不确定我到底知道你在寻找什么，但希望这个小例子可以让你在那里：

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

Answer 3

我相信你可以做到

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

当切换幻灯片时，这也会为您提供一个很好的slideUp / Down动画。

折叠并展开所有

3 个答案: