javascript - 简单的三元运算不起作用

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%。

Here's a fiddle with a solution for you.