2013-03-20 2 views
1

Я пытаюсь реализовать развернуть/свернуть всю функциональность. У меня есть список расширяемых элементов, с кнопкой в ​​правом верхнем углу, которая позволяет пользователям расширять и сворачивать все.Свернуть и развернуть

В настоящее время мой код работает, если все разворачивается/сворачивается вместе, но не работает должным образом, когда пользователь расширяет несколько (и не все) элементов. Он просто переключает сложенные/расширенные элементы. 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 фактически расширяет все/сворачивает все?

+0

Поскольку Стив указывает на свой ответ, каждый вызов переключателей переключается из «скрыть» в «показать» в зависимости от текущего состояния элемента. Чтобы достичь желаемого эффекта, вам нужно запустить .hide() для каждого применимого видимого элемента при свертывании и .show() при расширении. - или используйте toggle (true)/toggle (false). – BrianHall

ответ

1

Без полностью disecting свой код, я просто указать, что метод jQuery toggle просто переключает видимость от show до hide и наоборот. Если вы просто хотите, чтобы переключиться в одном направлении, вы можете сделать:

.toggle(true) показать и .toggle(false) скрыть

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

+0

Спасибо, это сработало! Все еще не могу понять, как заставить мои стрелки правильно выравниваться, когда эта кнопка нажата, хотя ... – theintellects

0

Использование toggle сделает это.

Я не уверен, я понимаю, что именно вы ищете, но этот маленький пример вы могли бы получить на вашем пути туда:

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

Я считаю, что вы можете просто сделать

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

Это также даст вам приятную анимацию SlideUp/Down при переключении слайдов.

Смежные вопросы