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

我有三个div。当我单击其中一个时，div将消失，并显示一个问候div。这一切都正常，请看我的小提琴：

此时，此div显示在固定位置。如何使其显示在刚刚单击的div上方

这有可能吗

希望有人能帮我

谢谢你抽出时间

---

（ps还有为什么单击时div会被强制向下？

您可以使用.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 class="hint-container">
  <div class="hint"> HINT! </div>
  <div class="greet"> Greetings </div>
</div>

您可以为容器指定一个绝对位置，使其占据所有容器并隐藏其中一个：

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

从这里你可以继续做你想做的事^

---

我希望它是清楚的。

对不起，我没有足够的知识在jquery中给出这方面的代码。但是，我相信您必须将click事件发送到使用类greet处理div的方法。然后使用position absolute将类greet div的左上方和左上方设置为事件中存储的顶部和左上方。

3个div下拉，因为

。Greeting

具有相对位置。如果将其设置为绝对值并获得单击元素的偏移量，则可以将其精确定位在该元素上方，而无需更改其他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);

---

看

我想我不明白这个问题：p.+1@ori感谢这很好，很小的要求：如果我想把它显示得比div高一点而不是正好在它上面呢？我也会：-）

top:offset.top-$（'.greet'）.height（）-20

（或任何适合你的数字）

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);