jQuery slideUp 在 Firefox 和 Safari 中的行为不同

Question

我是 jQuery 和 css 的初级人员，我只是不明白为什么我的 slideUp() 和 slideDown() 方法在 Chrome 和 Firefox/Safari 中的行为不同。

https://repl.it/J9yX

对于我的作品集项目，我垂直添加了几张图片。每次单击时，它的描述 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。下次不要链接到“只读”代码；）