jquery - 使用 jQuery 问题切换元素样式

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

看来我的问题是过渡 Bootstrap 添加。该元素试图在内容加载之前确定其高度。如果完成得太慢，元素的高度仍为 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?  


});