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

Posted 2023-02-25

【中文标题】slideToggle 后如何测试 DIV 是打开还是关闭

【英文标题】：How to test if DIV is open or closed after slideToggle

【发布时间】：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 子句中的语句或测试另一个元素。

按钮点击和添加图片有什么关系吗？还是它们是单独的动作？

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