Question

奥凯就是这个问题。我有一个没有顺序的清单,有一组物品。每个项目都有相应的数字四,在项目被搁置后将下降。

现在,除非你将一页缩略为,然后试图在该项目上 h。之后,该网页的滑坡比预计的还要进一步。

以上链接页的相关代码:

<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

The problem seems to be with the position method of the UI .. the following seems to work fine

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

Demo : http://www.jsfiddle.net/jnUsN/1/。

Answer 2

确实,我发现了一些行之有效的东西:

http://hjmenu.quickmediasolutions.com/mytest.html>rel=“nofollow noreferer”>[view amended samples]

相关守则:

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鱼拖 t使它在第一次审判中正确:

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

友情链接