简单的三元操作无效

Question

我试图在点击时进行div更改位置，然后再次单击时恢复到原始位置。我不能为我的生活找出问题所在。

$("#bottom").click(function() {

  var $about = $('#bottom'),
  top = $about.css('top') === '50%' ? '90%' : '50%';

$about.stop().animate({top: top}, 500);  
});

我的css是：

#bottom {
top: 90%;
left: 0; right: 0;
height: 100%;
}

当我点击#bottom时，div将自己定位在50％，但当我再次点击它时，没有任何反应。

Answer 1

.css('top')没有为您提供文字CSS top声明;它为您提供顶部的计算像素数量。如果#bottom的容器高100像素，那么$('#bottom').css('top')将为您提供90px，不 90%。

Here's a fiddle with a solution for you.