Question

我正在使用菜单栏，每个菜单栏项都是一个图像，当用户将鼠标放在菜单项上时，会出现带子菜单的div。

我想将div直接放在相应的图像项下（没有空格，div将悬停在所有元素上方），右侧对齐，这意味着div的右上角应位于图像的右下角。

因为我不能也不想硬编码div的位置，我想动态地做。

现在我有了这个：

$('img').each(function(){                     
   jQuery(this).mouseenter(function(){
     var menuItem = $('#' + this.id + '_menu'); //get the needed div 
     var imgRight = this.offset() + this.width();


   });
 });

Answer 1

offset()方法有top和left属性，您需要使用它们，例如：

var imgRight = this.offset().left + this.width();
var imgTop = this.offset().top + this.height();

之后，您必须将absolute定位给DIV，将它们放在图像下方：

menuItem.css({
  position:'absolute',
  top: imgTop,
  left: imgLeft,
  zIndex:5000
});

所以你的代码变成了：

$('img').each(function(){                     
   jQuery(this).mouseenter(function(){

   var menuItem = $('#' + this.id + '_menu'); //get the needed div 
   var imgRight = this.offset().left + this.width();
   var imgTop = this.offset().top + this.height();

     menuItem.css({
       position:'absolute',
       top: imgTop,
       left: imgLeft,
       zIndex:5000
     });

     // now show the corresponding div
     menuItem.show('slow');

   });
});

更多信息：

http://api.jquery.com/offset/

Answer 2

您不必硬编码或计算这些项目的位置。以下任何CSS规则都应实现您的目标：position: relative; right: 0或float: right:。

很高兴看到你的一些标记用于其他测试。 www.jsfiddle.net是一个很好的资源。

Answer 3

有两种方法可以做到这一点：纠正方式或作弊方式...... 正确的方法：你需要获得执行对象的顶部和客户端高度 - 客户端高度没有问题只是调用它 - 但顶部意味着你必须得到所有父对象的 - 使用这个：

function J_pos(o)
{
    var x,y;
    y=o.offsetTop;
    x=o.offsetLeft;
    o=o.offsetParent;
    while(o)
    {
        y+=o.offsetTop;
        x+=o.offsetLeft;
        o=o.offsetParent;
    }
    return [x,y];
};

现在您可以执行顶部和客户端高度：

<div style=top:"+(p[0]+obj.clientHeight)+";left:"+p[1]>

作弊方式（不那么动态 - 但很快）：在致动（鼠标悬停）对象周围放置一个像<span>的标签。使其位置相对。在其中放置一个<div>：

<div id="ABC" style="position:absolute;left:0;display:none">

现在在鼠标移动时放document.getElementById("ABC").style.display=""和bottom:0 - 繁荣宝贝拂去灰尘。对此缺点是您必须为每个实例手动执行此操作，但如果您只有3个左右的宾果游戏。

使用jQuery动态定位元素

3 个答案: