当前位置：文江博客话题详情

jQuery if-statement slidetoggle

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

发布于 2024-10-21 04:50:52 字数 622 浏览 8 评论 0 原文

我有一个 Jquery Ui 按钮 (#toggleIcons)，单击该按钮时，会切换 div (.icons) 以显示一些图标。我还使用 Jquery Isotope 和 Infinitescroll 动态添加新图像。我想做的是有一种方法可以在添加和更新新图像时保留幻灯片切换状态。 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();
}

不工作。任何帮助或指导将不胜感激。谢谢

原文

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.

//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

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

油饼 2024-10-28 04:50:52

你的情况倒退了：

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

You have your condition backwards:

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

回复收藏 0 原文

你爱我像她 2024-10-28 04:50:52

将检查状态脚本放入函数中 - 让它保留一点..

$('.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");
        }
    });             
});

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

回复收藏 0 原文

淡淡の花香 2024-10-28 04:50:52

为什么不只是切换或 slideToggle 吗？

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

why not just toggle or slideToggle it?

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

回复收藏 0 原文

逆夏时光 2024-10-28 04:50:52

我会使用 :visible

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

但如果你想坚持你的代码

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

可能应该阅读

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

I would use :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)

回复收藏 0 原文

洋洋洒洒 2024-10-28 04:50:52

我做了同样的事情，但是对于基于 id 的设置，然后我发现当我使用它时它有效

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

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

i was doing the same but for an id based setup and then i found it worked when i used this instead

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

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

回复收藏 0 原文

北城半夏 2024-10-28 04:50:52

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

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

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

回复收藏 0 原文

上课铃就是安魂曲 2024-10-28 04:50:52

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

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

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

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

回复收藏 0 原文

清浅ˋ旧时光 2024-10-28 04:50:52

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

slideToggle does not change visibility immediately. You need to hack around this

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
}

hope this 10 years late answer works for you

I found this from a 7 years old post from https://forum.jquery.com/topic/state-of-slidetoggle

回复收藏 0 原文

~没有更多了~