18

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

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

4

8 回答 8

28

你有你的条件倒退：

if ($(".icons").is(":visible")) { <-----
  $('.icons').hide(); 
} else {
  $('.icons').show(); 
}
于 2011-03-10T20:45:51.897 回答
22

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

$('.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");
        }
    });             
});
于 2011-10-22T14:29:38.037 回答
2

为什么不直接切换 或滑动切换呢？

$(".icons").toggle();
于 2011-03-10T20:45:41.253 回答
2

我会用:visible

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

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

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

应该读

if($(".icons").is(":hidden").length > 0)
于 2011-03-10T20:51:19.673 回答
1

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

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

alert($(this).attr('id') + ' is ' + state);
return false;
于 2013-12-22T09:28:43.443 回答
0

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

//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(); 
          }
于 2011-03-10T20:57:04.970 回答
0

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

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 年前的帖子中找到了这个

于 2021-01-27T00:08:46.927 回答