此脚本 css 菜单的 Jquery 窗口调整功能

Question

我是 jQuery 的新手，但我在代码中做了一些混合并得到了一个非常好的菜单。它运行良好，但是当我调整窗口大小时，事件链接下方的线失去了它的 X 轴位置。这是一支代码笔，您可以检查一下。

我知道我必须放这样的东西，但我不知道如何实现它。谁能帮我解决这个问题？

$( window ).resize(function() {
});

http://codepen.io/asdf/pen/EPMEZZ

Answer 1

一旦找到事件类的左侧位置，就可以将菜单行移动到该位置

window.onresize = function(event) {
defaultPosition = $(".active").offset().left;
$("#menu-line").css("left", defaultPosition+"px");
};

然而，这会产生新的问题，因为悬停功能记录了不同的位置，因此当您在窗口调整大小后悬停在菜单选项之外时，位置不正确的原因

删除悬停中的代码并添加以下内容可解决问题

defaultPosition = $(".active").offset().left;
$("#menu-line").css("left", defaultPosition+"px");

Demo