javascript - 在刚刚点击的 div 上方显示隐藏的 div

Question

我有 3 个 div。当我单击其中一个时，div 将消失并出现一个问候语 div。一切正常，请看我的 fiddle :

http://jsfiddle.net/mauricederegt/pknpb/1/

此时这个问候div出现在一个固定的位置。如何让它显示在刚刚点击的div上方？

这有可能吗？

希望有人能帮帮我

谢谢你的时间

(ps 还有为什么点击时 div 会被强制按下？)

Answer 1

3 个 div 下拉是因为 .greetings 有相对定位。如果将其设置为绝对值并获得被单击元素的偏移量，则可以将其定位在该元素的正上方，而不会改变其他 div 的布局:

var offset = $(this).hide(500).offset();
var score = 'Hello';
$('.greet').text(score);

$('.greet')
      .show()
      .css({
          top: offset.top - $('.greet').height(),
          left: offset.length,
          opacity: 1,
      })
      .stop()
      .delay(200)  
      .animate({top: 20, opacity: 0},1000);

参见 fiddle