Question

我正在处理一个包含一行图像的页面（多行，每行4个图像）。

每张图片都有描述图像的文字。

我目前正在使用Bootstrap崩溃插件进行切换。内容绝对定位，因此打开时不会将图像包裹在内容下。（内容位于图像下方）并向下推动下一行图像。

我正在使用jQuery在图像打开时添加一个类，并在关闭时删除它。当打开另一个图像时，我也重置了它。

我遇到的问题是当我打开第一张图像时，我给第一次图像的动态余量是第一次，然后在它没有移动到我放置的重置之后的任何时间。此时，所有元素都会受到影响。然而，只要我从第二个+图像开始，任何其他图像似乎添加/删除我添加的基于toggleClass的边距就好了。

以下是代码所在的页面 - http://comauto.bldsvr.com/meet-the-team/

这是我正在使用的jQuery

$('.team .member-group .member-image').on("click", function () {
    $('.member-image').css({'margin-bottom': '0px'});
    $(this).toggleClass('open-member'); 
    $('.team .member-group .member-image').not(this).removeClass('open-member');
    $('.open-member').css({'margin-bottom': $('.member-content').height()});
});

有谁可以指出可能会让这看起来像马车？

Answer 1

似乎我的问题是转换引导程序添加。该元素试图在内容加载之前确定其高度。如果做得太慢，元素仍然会有0高度，然后以这种方式渲染。

我在代码中添加了延迟，现在可以正常工作。

$('.team .member-group .member-image').on("click", function () {
    $('.team .member-group .member-image').not(this).removeClass('open-member');
    $(this).toggleClass('open-member');
    $(this).toggleClass('close-member');
    setTimeout(function (){

         $('.open-member').css({'margin-bottom': $('.member-content').height()});

     }, 500); // how long do you want the delay to be?  


});

使用jQuery发出切换元素样式

1 个答案: