javascript - 使用 Jquery 确定页面上元素位置的方法

Question

我正在使用 offset() 来获取 UL 之后图像的当前位置。我绝对定位图像，以便它作为指针卡在第一个 li 上。当单击任何 li 时，我希望图像滑动到该特定的 li。

我第一次单击“li”时，它会滑到页面的中心。但是，当我进行后续单击时，它会移动适当的距离，仅在页面的中心，因为它已经设置不正确。

我希望这是有道理的。

这是我的 HTML

<ul id="llist">
    <li class="t current"><a href="#"><span>solutions</span></a><img src="images/bg-tab-leader-arrow.png" width="24" height="53" title="pointer" class="pointer" /></li>
    <li class="m"><a href="#"><span>credit mangement solutions</span></a></li>
    <li class="b"><a href="#"><span>third party additions</span></a></li>
</ul>

和我迄今为止的 JS(它也很好地淡出了选项卡)

$('#llist li').click(function() {
    var thisTop = $(this).offset().top;
    $('.pointer').animate( {'top': thisTop} );
    return false;
});

CSS:

#subheader { position:relative; }
#subheader #llist { float:left; width:286px; margin:0 0 18px 0; padding:0; list-style:none; }
#subheader #llist li { color:#005474; line-height:68px; height:70px; background:url(../images/bg-tab-leader.png) no-repeat; position:relative; }
#subheader .pointer { z-index:1000; position:absolute; top:9px; right:-22px; }

任何关于为什么当我第一次单击时将其自身定位在页面中心而不是仅仅将其滑动到相对 LI 的想法将不胜感激。

Answer 1

我对这一行有点困惑:

var thisTop = $('#llist').offset().top;

...因为它得到 top llist 的位置，而不是 <li>已被点击。

如果我将其更改为:

var thisTop = $(this).offset().top;

...看起来工作正常。

示例: http://jsfiddle.net/patrick_dw/hxAzW/1/

<小时/>

编辑:

问题可能是您需要使用 .position()而不是.offset() ，以便它使用 <li> 的相对位置在容器内。

编辑:

看起来你还需要给出 relative定位到容器llist .