Question

我正在实施这个＆＃34; Magic Line＆＃34;代码进入我的导航菜单，但是在添加子菜单时我似乎遇到了麻烦。当您将鼠标悬停在任何子菜单项上时，魔术线会一直射到页面的左侧。我希望它留在子菜单所在的菜单项上。

您可以在此处查看我的网站：http://www.christmaslightsinstallation.ca/

原始脚本（不带子导航）：http://css-tricks.com/examples/MagicLine/

（我为此尝试了一个小提琴，但因为它在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")
    });    
});
});

我尝试使用＆＃34;＃menu-main-menu li li a＆＃34;创建第二个悬停功能，并尝试使用＆＃34; preventdefault（）;＆＃34;事件。这只是造成了大量的错误。

我对javascript很新，因此对我能想到/知道如何做的事情有限，尝试修复此问题。

Answer 1

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

将以上行更改为：

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

修改

同样改变：

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

为：

newWidth = $el.width();

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

1 个答案: