Я пытаюсь реализовать развернуть/свернуть всю функциональность. У меня есть список расширяемых элементов, с кнопкой в правом верхнем углу, которая позволяет пользователям расширять и сворачивать все.Свернуть и развернуть
В настоящее время мой код работает, если все разворачивается/сворачивается вместе, но не работает должным образом, когда пользователь расширяет несколько (и не все) элементов. Он просто переключает сложенные/расширенные элементы. 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 фактически расширяет все/сворачивает все?
Поскольку Стив указывает на свой ответ, каждый вызов переключателей переключается из «скрыть» в «показать» в зависимости от текущего состояния элемента. Чтобы достичь желаемого эффекта, вам нужно запустить .hide() для каждого применимого видимого элемента при свертывании и .show() при расширении. - или используйте toggle (true)/toggle (false). – BrianHall