slideToggle 后如何测试 DIV 是打开还是关闭答案

【问题标题】：How to test if DIV is open or closed after slideToggleslideToggle 后如何测试 DIV 是打开还是关闭
【发布时间】：2011-03-10 20:41:40
【问题描述】：

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

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

【问题讨论】：

定义不起作用。在我看来，hide() 和 .icons 当它们已经是 :hidden 时没有任何意义。切换if 子句中的语句或测试另一个元素。
按钮点击和添加图片有什么关系吗？还是它们是单独的动作？

标签： jquery if-statement slidetoggle

【解决方案1】：

你的条件倒退了：

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

【讨论】：

【解决方案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");
        }
    });             
});

【讨论】：

【解决方案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)

【讨论】：

【解决方案4】：

为什么不只是toggle 或slideToggle 呢？

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

【讨论】：

【解决方案5】：

我也在做同样的事情，但是对于基于 id 的设置，然后我发现当我使用它时它可以工作

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

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

【讨论】：

【解决方案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(); 
          }

【讨论】：

完全正确。如果图标正在显示，它们应该保持显示等。该按钮不添加图像，只是切换 .icon div。还没有让代码工作，但是一个好的方向。感谢您的帮助！！！
我刚刚开始真正使用 .data()，我不会怀疑我可能会错误地使用它。此外， $('icons').is(":hidden") 将检查匹配集中的所有图标。 .is() 将 ||检查它们，所以如果一个被隐藏，那么它返回 true

【解决方案7】：

您使用了另一种更健壮、更短的方法。您可以向元素添加属性，例如“打开”。第一次阅读时它不存在，因此它假定它是初始位置。如果它是'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");     
    }   
}

【讨论】：

【解决方案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 年前的帖子中发现的

【讨论】：