将元素相对于另一个元素定位

Question

我正在制作一个插件，在元素上下拉并使用预定义元素作为应用元素之外的下拉菜单。

标记看起来像这样

<a href="javascript:void(0)" id="some-menu" data-dropdown="dropdown-element">Click</a>

<ul id="dropdown-element">
    <li><a href="#">First item</a></li>
    <li><a href="#">Second item</a></li>
</ul>

使用$("#some-menu").dropdown({ placement: 'top' });会将#dropdown-element变为下拉列表。一切都很好，花花公子。

placement根据元素（顶部，底部，右侧，左侧）决定下拉列表的位置，但这应该相当容易应用，当我找到默认值时定位出来。

我尝试使用Bootstrap的Tooltip插件中的代码

pos = getPosition($element, inside);

actualWidth = $this[0].offsetWidth;
actualHeight = $this[0].offsetHeight;

switch (inside ? placement.split(' ')[1] : placement) {
    case 'bottom':
        tp = {top: pos.top + pos.height, left: pos.left + pos.width / 2 - actualWidth / 2};
    break;
    case 'top':
        tp = {top: pos.top - actualHeight, left: pos.left + pos.width / 2 - actualWidth / 2};
    break;
    case 'left':
        tp = {top: pos.top + pos.height / 2 - actualHeight / 2, left: pos.left - actualWidth};
    break;
    case 'right':
        tp = {top: pos.top + pos.height / 2 - actualHeight / 2, left: pos.left + pos.width};
    break;
}

但没有运气。

这就是它的样子

这是想要的结果

我希望它水平居中到#some-menu并将下拉列表应用于任何元素，也可以内联并保持垂直和水平定位。

修改 我发现下拉列表是在position: relative的元素内创建的，这就是为什么它的偏移是错误的。我现在的问题是将元素移动到正文中的最佳方法（或者可能是更好的解决方案）并保持良好的性能而不会超出需要的角度触及DOM。

Answer 1

这应该把菜单放在中心。

top = $('#some-menu').offset().top + 8; //Set the vertical position.

left = $('#some-menu').offset().left - $('#dropdown-element').outerWidth/2 + $('#some-menu').outerWidth/2; //Set the menu to the center of the button.

$('#dropdown-element').offset({top: top, left: left});