使用 jQuery 动态定位元素答案

【问题标题】：Dynamically positioning elements using jQuery使用 jQuery 动态定位元素
【发布时间】：2012-09-12 19:21:59
【问题描述】：

我正在使用菜单栏，每个菜单栏项都是一个图像，当用户将鼠标放在菜单项上时，将出现一个带有子菜单的 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();


   });
 });

【问题讨论】：

你的问题是什么？你绝对必须使用$(this).offset() 和$(this).width()。
我问还有什么可以用的

标签： javascript jquery html css

【解决方案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/

【讨论】：

以及如何在图像下放置div？我需要计算位置还是有更好的方法？
@ilann：是的，您需要它们具有更大的价值，我已在我的回答中添加了这一点。
div 左侧位置不正确。 div的右边框与img的右边框不对齐
@@ilann:: 你应该在类似 jsbin.com 的地方发布你的工作演示给我们看。

【解决方案2】：

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

很高兴看到您的一些标记以进行额外测试。 www.jsfiddle.net 是一个很好的资源。

【讨论】：

【解决方案3】：

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

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 个左右的宾果游戏。

【讨论】：