0

我尝试使用 js 和 jquery 制作下划线菜单项。
这是我的代码http://jsfiddle.net/naXja/9/
但我的许多项目没有固定宽度，所以下划线看起来不对。
有人可以解释我如何计算currpos正确的方法吗？

4

5 回答 5

2

我已经修改了您的脚本的一部分，以便它查看当前项目的位置和宽度，而不是“第一个”项目（您在悬停事件之外计算的项目（即只有一次）。

$('.nav > li').hover(function() {
    animatepos = $(this).position().left;
    thisWidth  = $(this).width();

    $('.menu-hover').stop().animate({left:animatepos, width:thisWidth}, 300);
}
, function() {
    $('.menu-hover').stop().animate({left:currpos, width:0}, 300);
});
于 2013-09-02T11:00:42.647 回答
1

每个元素都有不同的宽度。您必须获取每个元素的实际宽度，而不仅仅是第一个元素。

于 2013-09-02T11:00:55.907 回答
1

您可以使用offset() jQuery api 来查找元素位置（非绝对元素） 

var currpos = $('.nav > li.active').offset().left
于 2013-09-02T10:58:00.283 回答
0

您能否删除底部悬停图像并改用此 CSS：

border-bottom: 1px solid red;

图像在图像加载中需要更多时间。

于 2013-09-02T11:05:35.077 回答
0

您的代码的问题是您正在准备好初始化 menuitemwidth 并假设菜单项的所有宽度都相同

以下是具有动态项目宽度和位置的更新代码：

var animatepos = $(this).offset().left;
$('.menu-hover').stop().animate({left:animatepos, width:$(this).width()}, 300);

更新了 jsFiddle 链接：http: //jsfiddle.net/naXja/16/

于 2013-09-02T11:06:14.383 回答