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

问题描述：

我有3个div。当我点击其中的一个时，div将消失，并出现一个问候div。得到了这一切的工作，请参阅我的小提琴：在刚刚点击的div上方显示隐藏的div

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

在这问候格出现在固定位置的时刻。如何使它出现在刚被点击的div上方？

这甚至可能吗？

希望有人能帮助我

谢谢您的时间

（PS也是为什么的div被迫下降点击后？）

答

由于.greetings具有相对定位，所以3格下降。如果你把它绝对和点击的元素获取偏移，可以放置它正是元素之上的，没有它改变其它的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

我觉得我没有”我不明白这个问题：P。 +1！ – Chango 2012-02-06 20:44:52

@ori感谢这个很好，很小的请求：如果我想显示它更高一点的div而不是正确的顶部呢？ – Maurice 2012-02-06 21:13:37

我也会:-)'top：offset.top - $（'。greet'）。height（） - 20'（或任何适合您的号码） – ori 2012-02-06 22:00:02

答

你可以得到相对位置的元件与它的容器使用.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 { 
    position: relative; 
    width: 100px; 
    height: 20px; 
}

的，你可以给一个绝对的位置的容器，使他们占据了所有的容器和隐藏其中的一个：

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

从这里你可以继续，因为你在哪里做^。^

我希望这很清楚。

答

对不起，我不够精通jQuery中的代码。但是，我相信你将不得不将click事件发送到处理类的问候方法。然后在绝对位置设置左边和顶部的问候div顶部和左侧存储在事件中。

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

相关推荐