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

为什么这个DIV没有落在正确的位置？

2 个答案: