Question

我有3个div。当我点击其中一个时，div将消失并出现问候语div。得到这一切，请看我的小提琴：

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

Answer 2

我建议将每个'提示'放在一个容器中，并附上消息：

<div class="hint-container">
  <div class="hint"> HINT! </div>
  <div class="greet"> Greetings </div>
</div>

给容器一个固定的大小和相对位置：

.hint-container {
  position: relative;
  width: 100px;
  height: 20px;
}

你可以给容器一个绝对位置，让它们占据所有容器并隐藏其中一个容器：

.hint-container > div {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
 }
 .hint-container .greet {
   display: none;
 }

从这里开始，你可以继续做^。^

我希望它很清楚。

Answer 3

抱歉，我不熟悉jquery中的代码。但是，我相信你必须将click事件发送到使用class greet处理div的方法。然后使用位置绝对设置，类的左侧和顶部将div存储到顶部和左侧存储在事件中。

Answer 4

您可以使用.position（）获取元素相对于其容器的位置，或者使用.offset（）获取相对于文档的偏移量。

在这种情况下，它可能看起来像这样：

$('.ht').click(function hint() {
    var x = $(this).offset().left;//get offset relative to document
    $(this).hide(500);
    score = 'Hello';
      $('.greet').text(score);

    $('.greet')
          .hide()
          .css({
              bottom: 20,
              left: x, //add x variable here
              opacity: 1,
          })
          .show()
          .stop()
          .delay(200)  
          .animate({'bottom':75, opacity: 0},1000);
});

但是你可能想要使.greet类的位置：绝对，你可能需要对高度做一些事情。

在刚刚单击的div上方显示隐藏的div

4 个答案: