Есть ли способ заставить $ .toggle () последовательно переключать уже скрытые дочерние элементы? - PullRequest
Новая
       0

Есть ли способ заставить $ .toggle () последовательно переключать уже скрытые дочерние элементы?

4 голосов
/ 21 сентября 2011

У меня есть приложение, в котором наборы данных могут быть отфильтрованы на разных уровнях, и - из соображений производительности - было бы неплохо иметь возможность независимо отображать соответствующий режим отображения вложенных элементов div.Проблема заключается в том, что переключатель вернет свойство display обратно в исходное состояние скрытого дочернего элемента, но не изменит его на none, если один из его предков уже скрыт .

Для репликации: в этот JSFiddle ,

  1. Нажмите кнопку «Переключить 3», а затем кнопку «Переключить 2».
  2. Нажав переключатель 3", а затем" переключатель 2 ", вы найдете 3 восстановленных (как и ожидалось).
  3. Теперь нажмите кнопку" Переключить 2 ", а затем" Переключить 3 ".
  4. При нажатииснова «переключить 2», 3 все еще виден (???).

Ответы [ 2 ]

7 голосов
/ 21 сентября 2011

toggle может принимать логическое значение 

$(selector).toggle(false);

http://api.jquery.com/toggle/

.toggle (showOrHide)

showOrHideA Логическое значение, указывающее, отображать или скрывать элементы.

UPDATE

Вы можете достичь желаемой функциональности, создав простой класс hidden css, вызывая toggleClass() вместо использования toggle(). toggle(), кажется, полностью пропускает свои собственные функции, если рассматриваемый элемент не виден.

http://jsfiddle.net/hunter/GufAW/3/

$("#toggle-1").click(function() {
    $("#1").toggleClass("hidden");
});
$("#toggle-2").click(function() {
    $("#2").toggleClass("hidden");
});
$("#toggle-3").click(function() {
    $("#3").toggleClass("hidden");
});
1 голос
/ 22 сентября 2011

Попробуйте переключить свойство css display напрямую:

http://jsfiddle.net/GufAW/5/

$("#toggle-1").click(function() {
    $("#1").css("display", ($("#1").css("display")==="none") ? "block" : "none");
});
$("#toggle-2").click(function() {
    $("#2").css("display", ($("#2").css("display")==="none") ? "block" : "none");
});
$("#toggle-3").click(function() {
    $("#3").css("display", ($("#3").css("display")==="none") ? "block" : "none");
});
...