Question

我是jQuery和css的初级，我只是想不通为什么我的slideUp（）＆amp; slideDown（）方法在Chrome与Firefox / Safari中的行为方式不同。

对于我的投资组合项目，我垂直添加了一些图像。每次单击时，其描述div显示（slideDown（）），其他打开的描述消失（slideUp（））。

      $(".project").each(function(){
      $(this).click(()=>{
         $(".project").find('.projectDescription').slideUp()

        setTimeout(()=>{
          $(this).find('.projectDescription').slideDown(400)
        }, 400)
      })
    })

在Chrome中，点击的图片不会超出页面顶部，因为其描述会向下滑动并且上一张图片的说明会向上滑动。它会受到其他div高度变化的影响，直到到达页面顶部但是，在Safari和Firefox中，当其他打开的描述向上滑动并且其高度发生变化时，单击的图像实际上会超出页面顶部。

示例：Firefox vs Chrome

如果您能解释为什么以及如何解决此问题，我将不胜感激。

Answer 1

我不确定你有什么问题，你想要解决什么，因为你的描述有点令人困惑......但让我试试。我修改了代码，当你再次点击同一张照片时，它会隐藏并且不会滑动。我使用flag来检查用户是否点击了相同或不同的照片，如果相同则只跳过整个slideUp部分：

var checkSame;
$('.project').on('click', function() {
    var photo = this.id;
    if (photo != checkSame) {
        $('.project').find('.projectDescription').slideUp();
    }
    checkSame = photo;
    $(this).find('.projectDescription').slideToggle(600);
});

PS。下次没有链接到“只读”和＃39;代码;）

jQuery slideUp在Firefox和Linux中的表现不同苹果浏览器

1 个答案: