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

Question

我有一个Jquery Ui的按钮（#toggleIcons），当点击时，会切换一个div元素（.icons）来显示一些图标。我还使用了Jquery Isotope和Infinitescroll来动态添加新的图片。我想做的是，在添加和更新新图片的同时保留slideToggle的状态。Infinitescroll有一个回调函数，以便我可以更新页面和图标状态。

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

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

- Macsupport

---

定义“不起作用”。在我看来，当.icons已经被:hidden隐藏时，hide()它们似乎没有意义。交换if语句中的语句或测试另一个元素。 - Felix Kling

按钮点击与添加图片有关吗？还是它们是分开的操作？ - DefyGravity

Answer 1

你的条件反了：

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

- Mike Gleason jr Couturier

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");
        }
    });             
});

- Ryan Harne

Answer 3

我会使用:visible。

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

但如果您想坚持您的代码

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

应该阅读

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

- Dutchie432

Answer 4

我曾经做过类似的事情，但是针对基于id的设置，后来我发现当我使用以下方法时它起作用了。

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

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

- Jamie

Answer 5

为什么不只是使用toggle或slideToggle呢？

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

- FatherStorm

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

- DefyGravity

---

这完全正确。如果图标正在显示，则应保持显示等等。该按钮不会添加图片，只会切换 .icon div。尚未使代码起作用，但是是一个不错的方向。感谢您的帮助！！！ - Macsupport

我刚开始真正尝试使用.data()，我不怀疑我可能在错误地使用它。此外，$('icons').is(":hidden") 将检查匹配集中的所有图标。.is()会逻辑或检查它们，所以如果有一个是隐藏的，则返回true。 - DefyGravity

Answer 7

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
}

希望这个十年晚的答案对你有用

我从一个七年前的https://forum.jquery.com/topic/state-of-slidetoggle帖子中找到了这个。

- Katelynn ruan

Answer 8

您可以使用更健壮且更短的另一种方法。您可以向元素添加一个属性，例如 '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");     
    }   
}

- user12282614