Question

我有一个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();
}

不工作。任何帮助或方向将不胜感激。感谢

Answer 1

你的状况倒退了：

if ($(".icons").is(":visible")) { <-----
  $('.icons').hide(); 
} else {
  $('.icons').show(); 
}

Answer 2

将检查状态脚本放在函数中 - 让它保持一点......

$('.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");
        }
    });             
});

Answer 3

为什么不只是toggle或slideToggle呢？

$(".icons").toggle();

Answer 4

我会使用:visible

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

但是如果你想坚守你的代码

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

应该阅读

if($(".icons").is(":hidden").length > 0)

Answer 5

我正在做同样的事情，但对于基于身份的设置，然后我发现它在我使用它时起作用

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

alert($(this).attr('id') + ' is ' + state);
return false;

Answer 6

我想我明白你想要什么。从某个按钮，与添加图像无关，用户可以隐藏和显示图标。添加了新图像，图标“显示”，您不知道回调是否应该显示图标，或隐藏它们以使它们与图库的其余部分相匹配。

//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(); 
          }

Answer 7

您使用另一种更健壮和更短的方法。您可以向元素添加一个属性，例如“ open”。第一次阅读时不存在，因此假定它是初始位置。如果它为“ 0”，则将其反转，然后在条件块中执行slidedown（）或slideup（）

这有很多好处： -您可以通过浏览器调试器读取该值并查看其更改 -最有用的是，您可以使用.each迭代器读取该值并检查打开的值

function toggleBox(id) {
    let o = $("#box_" + id);    
    let op = o.attr("open") !== undefined;  
    if (op) {
        o.slideUp();
        o.removeAttr("open");       
    } else {
        o.slideDown();
        o.attr("open","1");     
    }   
}

Answer 8

slideToggle 不会立即改变可见性。你需要解决这个问题

var hidden=$('#targetdiv').is(':visible'); //check the visibility before calling slideToggle
var $('#yourbuttonid').slideToggle(); //toggle it
if(hidden)
{ #put whatever you want to do here when #targetdiv is OPEN!
}
else
{ #content for when #targetdiv is CLOSED
}

希望这个迟到 10 年的答案对您有用

我是从 https://forum.jquery.com/topic/state-of-slidetoggle

7 年前的帖子中发现的

如何在slideToggle之后测试DIV是打开还是关闭

8 个答案: