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

我有许多DIV，当鼠标悬停在菜单上时，这些DIV可以显示菜单DIV。

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

解决方案

tl; dr ：(在这里尝试)

如果我们具有以下HTML：

<div id="menu" style="display: none;">
   <!-- menu stuff in here -->
   <ul><li>Menu item</li></ul>
</div>

<div class="parent">Hover over me to show the menu here</div>

那么我们可以使用以下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的position插件(如下面的答案中所述)即可处理所有可能发生的情况。注意，在调用position({...})之前，必须先对菜单元素进行show()处理。插件无法定位隐藏的元素。

3年后的2012年更新说明：

(原始解决方案在此处存档，以供后代使用)

因此，事实证明，我在这里使用的原始方法远非理想。特别是在以下情况下将失败：

• 菜单的偏移父级不是占位符的偏移父级
• 占位符带有边框/填充

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

像这样吗？

$(menu).css("top", targetE1.y + "px"); 
$(menu).css("left", targetE1.x - widthOfMenu + "px");

最终这对我有用。

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

这对我有用：

var posPersonTooltip = function(event) {
var tPosX = event.pageX - 5;
var tPosY = event.pageY + 10;
$('#personTooltipContainer').css({top: tPosY, left: tPosX});

这是我编写的jQuery函数，可帮助我定位元素。

这是一个示例用法：

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

上面的代码将＃el1的右下角与＃el2的右上角对齐。 ['cc'，'cc']将＃el1居中＃el2. 确保＃el1的css位置为：absolute和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'
  });

}

我们现在可以使用：

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

快速定位(jQuery UI / Position)。

注意：这需要jQuery UI(不仅是jQuery)。

我们可以在此处下载jQuery UI。