Как проверить, открыт ли DIV или закрыт после slideToggle - PullRequest
Новая
       2

Как проверить, открыт ли DIV или закрыт после slideToggle

16 голосов
/ 10 марта 2011

У меня есть кнопка Jquery Ui (#toggleIcons), которая при нажатии переключает div (.icons) для отображения некоторых значков.Я также использую Jquery Isotope и Infinitescroll для динамического добавления новых изображений.Я пытаюсь сделать так, чтобы состояние slideToggle сохранялось при добавлении и обновлении новых изображений.Ifinitescroll имеет функцию обратного вызова, так что я могу обновить страницу и состояние значков. 

//My button click function
$("#styleSwitcher #toggleIcons" ).click(function() {
   $('.icons').slideToggle('slow');
   //for Isotope to update the layout
   $('#container').isotope('reLayout') 
    return false;
});

//code I am working on to put in callback to test if div is open or closed
if($(".icons").is(":hidden"))
{
  $('.icons').hide();
}
else
{
  $('.icons').show();
}

Не работает.Любая помощь или направление будут оценены.спасибо

Ответы [ 6 ]

24 голосов
/ 10 марта 2011

Ваше состояние задом наперед: 

if ($(".icons").is(":visible")) { <-----
  $('.icons').hide(); 
} else {
  $('.icons').show(); 
}
20 голосов
/ 22 октября 2011

Поместите скрипт проверки состояния в функцию - пусть он будет немного .. 

$('.advance-view').click(function() {
    $('#advance-control').slideToggle('slow', function() {
        if ($('#advance-control').is(':hidden'))
        {
            $('.advance-view').css("background-color", "#2B509A");
        }
        else
        {
            $('.advance-view').css("background-color", "#4D6837");
        }
    });             
});
2 голосов
/ 10 марта 2011

Я бы использовал :visible

if($(".icons:visible").length > 0)
    //item is visible
else
    //item is not visible

, но если вы хотите придерживаться своего кода 

if($(".icons").is(":hidden"))

, вероятно, следует прочитать 

if($(".icons").is(":hidden").length > 0)
2 голосов
/ 10 марта 2011

почему бы не просто переключить или slideToggle it? 

$(".icons").toggle();
1 голос
/ 22 декабря 2013

я делал то же самое, но для установки на основе идентификатора, а потом обнаружил, что это работает, когда я использовал это вместо 

if ($(this).is(':hidden')) {
    var state = "closed";
} else {
    var state = "open";
}

alert($(this).attr('id') + ' is ' + state);
return false;
0 голосов
/ 10 марта 2011

Я думаю, я понимаю, что вы хотите.с помощью какой-либо кнопки, не имеющей отношения к добавлению изображений, пользователи могут скрывать и отображать значки.Добавлены новые изображения с иконками, показывающими, и вы не знаете, когда вам нужно сделать обратный вызов: отображать значки или скрывать их, чтобы они соответствовали остальной части галереи. 

//My button click function
$("#styleSwitcher #toggleIcons" ).click(function() {
$('.icons').slideToggle('slow');
//for Isotope to update the layout
$('#container').isotope('reLayout').data({iconStateIsHidden:$('.icons').is(":hidden")}); 
 return false;
 });



 //code I am working on to put in callback to test if div is open or closed



       if($("#container").data()[iconStateIsHidden])
          {
// newly added images should match the rest of the gallery
        $('.icons').hide(); 
          }     
        else
          {
// newly added images should match the rest of the gallery
        $('.icons').show(); 
          }
...