爲什麼DIV不在正確的位置？

Question

好的，這是問題所在。我有一大堆項目的無序列表。對於每個項目，都有一個相應的DIV，當物品懸停時將會下降。

該示例可以找到here。

現在，它工作正常，除非您向下滾動頁面，然後嘗試將鼠標懸停在該項目上。然後，它在頁面上向下滑動，超出預期的範圍。

<script type="text/javascript"> 

function doOver(num) 
{ 
    $('#s' + num).position({ of: $('#m' + num), 
          my: 'left top', 
          at: 'left bottom' }); 
    $('#s' + num).slideDown(); 
} 

</script> 

... 

<ul id="test" style="width: 400px; height: 25px; background-color: red;"> 
    <li id='m1' onmouseover='doOver(1)'>TestItem1</li> 
    <li id='m2' onmouseover='doOver(2)'>TestItem2</li> 
    <li id='m3' onmouseover='doOver(3)'>TestItem3</li> 
</ul> 

<div id='s1' style='width: 100px; height: 50px; position: absolute;'></div> 
<div id='s2' style='width: 100px; height: 50px; position: absolute;'></div> 
<div id='s3' style='width: 100px; height: 50px; position: absolute;'></div> 

... 

任何想法，爲什麼出現這種情況：

下面是從頁面的相關代碼上面鏈接？

Answer 1

這個問題似乎是與UI的position方法.. 以下似乎做工精細

function doOver(num) 
{ 
    var $m = $('#m'+num); 
    var mPos = $m.position(); // you could you $m.offset() here (depenging on the overall structure) 
    var mHeight = $m.outerHeight(); 
    $('#s' + num).css({ 'top':mPos.top + mHeight, 'left':mPos.left }); 
    $('#s' + num).slideDown(); 
} 

演示：http://www.jsfiddle.net/jnUsN/1/

Answer 2

嗯，我發現一些工作：

[view modified sample]

相關代碼：

function Position(item,parent) 
{ 
    $(item).position({ of: $(parent), my: 'left top', at: 'left bottom' }); 
} 

function doOver(num) 
{ 
    $('#s' + num).css('height','0px'); 
    $('#s' + num).show(); 
    Position('#s' + num,'#m' + num); 
    $('#s' + num).hide(); 
    $('#s' + num).css('height','50px'); 
    $('#s' + num).slideDown(); 
} 

...因爲Chrome瀏覽器不會使正確的第一次嘗試：

$(function() { 
    Position('#s1','#m1'); 
    Position('#s2','#m2'); 
    Position('#s3','#m3'); 
});