jQuery 如何在slideToggle后测试DIV是打开还是关闭
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5265664/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to test if DIV is open or closed after slideToggle
提问by Macsupport
I have a Jquery Ui button ( #toggleIcons) that when clicked, toggles a div (.icons) to show some icons. I am also using Jquery Isotope and Infinitescroll to add new images dynamically. What I am trying to do is to have a way for the slideToggle state to be retained as the new images are added and updated. Ifinitescroll has a callback function so that I can update the page and state of the icons.
我有一个 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();
}
Not working. Any help or direction would be appreciated. thanks
不工作。任何帮助或指导将不胜感激。谢谢
回答by Mike Gleason jr Couturier
You have your condition backwards:
你的条件倒退了：
if ($(".icons").is(":visible")) { <-----
$('.icons').hide();
} else {
$('.icons').show();
}
回答by Ryan Harne
Put check state script in a function - let it hold a bit..
将检查状态脚本放在一个函数中 - 让它保持一点..
$('.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");
}
});
});
回答by FatherStorm
回答by Dutchie432
I would use :visible
我会用 :visible
if($(".icons:visible").length > 0)
//item is visible
else
//item is not visible
but if you want to stick to your code
但如果你想坚持你的代码
if($(".icons").is(":hidden"))
should probably read
应该读
if($(".icons").is(":hidden").length > 0)
回答by Jamie
i was doing the same but for an id based setup and then i found it worked when i used this instead
我正在做同样的事情，但是对于基于 id 的设置，然后我发现当我使用它时它可以工作
if ($(this).is(':hidden')) {
var state = "closed";
} else {
var state = "open";
}
alert($(this).attr('id') + ' is ' + state);
return false;
回答by user12282614
You use another method which is more robust and shorter. You can add an attribute,eg 'open' to the element. First time you read it is not there so it assumes it is the initial position. If it is '0' then you reverse it and in the condition block you do slidedown() or slideup()
您使用另一种更健壮和更短的方法。您可以向元素添加属性，例如“打开”。第一次阅读它时它不在那里，所以它假定它是初始位置。如果它是“0”，那么你将它反转，并在条件块中执行 slidedown() 或 slideup()
This has many benefits: - you can read the value by browser debugger and see it changed - most useful is you can read that value using .each iterator and check for the ones that are open
这有很多好处： - 您可以通过浏览器调试器读取值并查看它的更改 - 最有用的是您可以使用 .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");
}
}
回答by DefyGravity
i think i understand what you want. from some button, that has nothing to do with adding images, users can hide and show icons. New images are added, with icons 'showing', and you have no idea on callback whether you should be showing the icons, or hiding them so they match the rest of the gallery.
我想我明白你想要什么。从一些与添加图像无关的按钮，用户可以隐藏和显示图标。添加了新图像，带有“显示”图标，您不知道是应该显示图标还是隐藏它们以使它们与图库的其余部分相匹配，因此您不知道回调。
//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();
}
