如何使用jQuery将一个元素相对于另一个元素定位？

我有一个隐藏的DIV,其中包含一个类似工具栏的菜单.

我有许多DIV,当鼠标悬停在它们上面时,它们可以显示菜单DIV.

是否有内置功能将菜单DIV移动到活动(鼠标悬停)DIV的右上角？我正在寻找类似的东西$(menu).position("topright", targetEl);

1> Jacob..：

---

TL;博士:(试一试这里)

如果您有以下HTML:

   
   
Menu item


Hover over me to show the menu here

然后您可以使用以下JavaScript代码:

$(".parent").mouseover(function() {
    // .position() uses position relative to the offset parent, 
    var pos = $(this).position();

    // .outerWidth() takes into account border and padding.
    var width = $(this).outerWidth();

    //show the menu directly over the placeholder
    $("#menu").css({
        position: "absolute",
        top: pos.top + "px",
        left: (pos.left + width) + "px"
    }).show();
});

但它不起作用!

只要菜单和占位符具有相同的偏移父级,这将起作用.如果他们不这样做,并且您没有嵌套的CSS规则来关注#menu元素在DOM中的位置,请使用:

$(this).append($("#menu"));

就在定位#menu元素的行之前.

但它仍然不起作用!

您可能有一些奇怪的布局无法使用此方法.在这种情况下,只需使用jQuery.ui的位置插件(如下面的答案中所述),它可以处理所有可能的可能性.请注意,show()在调用之前,您必须使用menu元素position({...}); 插件无法定位隐藏元素.

2012年3年后更新备注:

(原始解决方案存档在这里为后代)

所以,事实证明我在这里的原始方法远非理想.特别是,如果:

菜单的偏移父级不是占位符的偏移父级

占位符有边框/填充

幸运的是,jQuery 在1.2.6中引入了方法(position()和outerWidth()),这使得在后一种情况下找到正确的值变得更加容易.对于前一种情况,append将菜单元素添加到占位符(但会基于嵌套破坏CSS规则).

---

哇哇哇哇哇哇哇哇哇哇哇哇哇哇哇哇哇哇哇哇哇哇哇哇哇哇哇哇哇哇哇哇 得爱SOF.

---

嘿 - 我有同样的事情发生在我身上 - 不记得怎么做,并在Stack Overflow上找到了我自己的答案.

---

我认为你的菜单div样式应该使用display:none而不是display:hidden.

---

当菜单的容器具有position:relative(或者除了inherit之外的任何东西)时,这将无法正常工作,因为position:absolute将关闭它,而.offset将关闭页面的左上角.

---

根据菜单的定位方式,jQuery的.offset()可以用作.position()的替代品.http://api.jquery.com/offset/

2> 小智..：

---

注意:这需要jQuery UI(不仅仅是jQuery).

您现在可以使用:

$("#my_div").position({
    my:        "left top",
    at:        "left bottom",
    of:        this, // or $("#otherdiv")
    collision: "fit"
});

用于快速定位(jQuery UI/Position).

你可以在这里下载jQuery UI.

---

请注意,这个答案取决于jQueryUI,而不仅仅是jQuery.可能会解释为什么它不适合你们中的几个人.

3> paul..：

---

这最终对我有用.

var showMenu = function(el, menu) {
    //get the position of the placeholder element  
    var pos = $(el).offset();    
    var eWidth = $(el).outerWidth();
    var mWidth = $(menu).outerWidth();
    var left = (pos.left + eWidth - mWidth) + "px";
    var top = 3+pos.top + "px";
    //show the menu directly over the placeholder  
    $(menu).css( { 
        position: 'absolute',
        zIndex: 5000,
        left: left, 
        top: top
    } );

    $(menu).hide().fadeIn();
};

4> Venkat D...：

---

这是我写的一个jQuery函数,它可以帮助我定位元素.

以下是一个示例用法:

$(document).ready(function() {
  $('#el1').position('#el2', {
    anchor: ['br', 'tr'],
    offset: [-5, 5]
  });
});

上面的代码将#el1的右下角与#el2的右上角对齐.['cc','cc']会在#el2中居中#el1.确保#el1具有位置的css:绝对值和z-index:10000(或一些非常大的数字)以使其保持在最顶层.

偏移选项允许您按指定的像素数微移坐标.

源代码如下:

jQuery.fn.getBox = function() {
  return {
    left: $(this).offset().left,
    top: $(this).offset().top,
    width: $(this).outerWidth(),
    height: $(this).outerHeight()
  };
}

jQuery.fn.position = function(target, options) {
  var anchorOffsets = {t: 0, l: 0, c: 0.5, b: 1, r: 1};
  var defaults = {
    anchor: ['tl', 'tl'],
    animate: false,
    offset: [0, 0]
  };
  options = $.extend(defaults, options);

  var targetBox = $(target).getBox();
  var sourceBox = $(this).getBox();

  //origin is at the top-left of the target element
  var left = targetBox.left;
  var top = targetBox.top;

  //alignment with respect to source
  top -= anchorOffsets[options.anchor[0].charAt(0)] * sourceBox.height;
  left -= anchorOffsets[options.anchor[0].charAt(1)] * sourceBox.width;

  //alignment with respect to target
  top += anchorOffsets[options.anchor[1].charAt(0)] * targetBox.height;
  left += anchorOffsets[options.anchor[1].charAt(1)] * targetBox.width;

  //add offset to final coordinates
  left += options.offset[0];
  top += options.offset[1];

  $(this).css({
    left: left + 'px',
    top: top + 'px'
  });

}