Question

我正在使用offset()来获取UL之后图像的当前位置。我绝对定位图像，以便它作为指针悬挂在第一个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的{{1}}位置，而不是点击的llist。

如果我将其更改为：

<li>

......似乎工作正常。

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

修改

问题可能是您需要使用var thisTop = $(this).offset().top;而不是.position()，以便它使用容器中.offset() 的相对位置。

修改

您还需要将<li>定位到容器relative。

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

1 个答案: