javascript - Magic Line CSS/Javascript 代码 - 添加子导航

Question

我正在我的导航菜单中实现这个“魔法线”代码，但我似乎在添加子菜单时遇到了麻烦。当您将鼠标悬停在任何子菜单项上时，魔术线会一直射到页面的左侧。我希望它保留在子菜单所在的菜单项上。

您可以在这里查看我的网站:http://www.christmaslightsinstallation.ca/

原始脚本(没有子导航):http://css-tricks.com/examples/MagicLine/

(我为此尝试了一个 fiddle ，但由于它在 wordpress 中，所以翻译得不是很好)

我的javascript如下:

$(function() {

var $el, leftPos, newWidth,
    $mainNav = $("#menu-main-menu");

$testing = $(".menu-header");

$testing.append("<span id='magic-line'></span>");
var $magicLine = $("#magic-line");

$magicLine
    .width($(".current_page_item").width())
    .css("left", $(".current_page_item a").position().left)
    .data("origLeft", $magicLine.position().left)
    .data("origWidth", $magicLine.width());

$("#menu-main-menu li a").hover(function() {
    $el = $(this);
    leftPos = $el.position().left;
    newWidth = $el.parent().width();
    $magicLine.stop().animate({
        left: leftPos,
        width: newWidth
    });
}, function() {
    $magicLine.stop().animate({
        left: $magicLine.data("origLeft"),
        width: $magicLine.data("origWidth")
    });    
});
});

我尝试使用“#menu-main-menu li li a”创建第二个悬停功能，并尝试使用“preventdefault();”事件。这只是造成了大量的错误。

我是 javascript 的新手，所以我能想到/知道如何做的事情很有限，无法尝试解决这个问题。

Answer 1

$("#menu-main-menu li a").hover(function() {

将上面一行改为:

$("#menu-main-menu > li").hover(function() {

编辑:

同时改变:

newWidth = $el.parent().width();

到:

newWidth = $el.width();