相對於另一個元素定位元素

我正在製作一個插件，它可以對元素進行下拉菜單，並使用預定義的元素作爲應用元素外部的下拉菜單。相對於另一個元素定位元素

的標記看起來像這樣

<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決定的下拉是如何根據元素（上，下，左，右）的位置，但這個應該是相當容易申請，當我想通了默認定位出來。

我嘗試使用此代碼引導的工具提示插件

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

但沒有運氣。

這是什麼樣子 How the dropdown looks like in browser

這是想要的結果 How the dropdown should look like

我希望它水平居中到#some-menu，並且下拉被應用到任何元素，內聯也並保持兩垂直和水平定位。

編輯： 我發現下拉是一個元素中創建了position: relative，這就是爲什麼它的偏移是錯誤的。我現在的問題是將元素移動到主體中的最佳方式（或者更好的解決方案），並且保持良好的性能，而不需要更多地接觸DOM。

來源

2012-11-23 fnky

該問題的+1。此外，很好的圖，但你可以添加一個你想要它看起來像嗎？除非我誤解了？ – Basic

這應該把菜單放在中間。

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

來源

2012-11-23 17:15:42

下拉菜單不是按鈕的子項，但仍應該與按鈕位置相關。但是，我真正的問題是如何做到這一點真正的數學。 – fnky

我編輯了我的答案，看它是否有效。 –

相對於另一個元素定位元素

回答

相關問題