簡單的三元操作無效

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的容器高100px，那么$('#bottom').css('top')會給你90px ， 而不是 90% 。

這是一個為您提供解決方案的小提琴。