折叠并展开全部

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

目前，如果所有内容一起展开/折叠，但我的代码在用户扩展一些（而不是全部）元素时无法正常工作。它只是切换折叠/展开的元素。 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

折叠并展开全部

回答

相关问题