下划线菜单项答案

【问题标题】：Underlining menu item下划线菜单项
【发布时间】：2013-09-02 10:50:53
【问题描述】：

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

【问题讨论】：

在您的问题中包含相关代码
这已经完成了：css-tricks.com/jquery-magicline-navigation
参考此链接https://code.google.com/p/jquery-underline/wiki/Instructions

【解决方案1】：

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

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

【讨论】：

我尝试应用您的代码，它适用于 jsfiddle，但它在 5 月页面上以错误的方式运行 - 对于 span.menu-hover，我对 left 的含义有误。你能帮我找出错误吗？我在这里上传了我的文件rghost.ru/48529687
尝试用.position()交换.offset()

【解决方案2】：

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

var currpos = $('.nav > li.active').offset().left

【讨论】：

【解决方案3】：

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

【讨论】：

【解决方案4】：

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

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

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

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

【讨论】：

【解决方案5】：

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

border-bottom: 1px solid red;

图片加载需要更多时间。

【讨论】：