用jQuery顯示一個元素相對於另一個元素

Question

我正在開發一個界面，要求用戶可以點擊一個按鈕，然後我將顯示一個相對於按鈕定位的浮動div（您可以將它想象爲當你點擊下拉箭頭時顯示的區域）。

我怎樣才能正確定位這個浮動元素毗鄰點擊按鈕（可能在頁面上的任何地方）？

在此先感謝！

Answer 1

<input type="button" id="btn" value="Choose Something" /> 

<div id="select"> 
    ... 
</div> 

與CSS：

#select { position: absolute; display: none; } 

和Javascript：

$("#btn").click(function() { 
    var sel = $("#select"); 
    var pos = $("#btn").offset(); 
    if (sel.is(":hidden")) { 
    sel.attr({ 
     top: pos.top + 20, 
     left: pos.left 
    }); 
    sel.show(); 
    } else { 
    sel.hide(); 
    } 
}); 

基本上你絕對將浮動div定位到r將其從正常流量中移除，然後使用offset()找出與按鈕相關的位置。

Answer 2

你可以得到按鈕by using .offset()

例如位置：

$("#myButton").click(function() { 
    var o = $(this).offset(); 
    $("#myDiv").css({'position': 'absolute','left':o.left,'top',o.top}); 
}); 

這位置是正確的按鈕之上，只是調整的是左/上任何地方的關係，你想讓它去。

例如將其放置在按鈕下改變頂部部分'top': o.top + $(this).height()或按鈕的右右：'left':o.left + $(this).width()

Answer 3

您應該都使用.offset（）來獲取和設置位置，以防元素被分層定位。

對於例題

<input type="button" id="myButton" value="Choose Something" 
    style="position: absolute; top: 100px;" /> 
<div style="position: absolute; top: 200px;">parent div 
    <div id="myDiv" style="position: absolute; top: 20px;">child div</div> 
</div> 

$("#myButton").click(function() { 
    var o = $(this).offset(); 
    $("#myDiv").offset({ 
     'left': o.left, 
     'top': o.top - 20 
    }); 
}); 

這裏是一個小提琴：http://jsfiddle.net/R5YM6/1/