Question

我试图在我的网站菜单中添加“魔术线”：http://bioda.bg/

我一直在关注本指南：https://css-tricks.com/jquery-magicline-navigation/

起初它起作用（有时它可以正常工作），但大部分时间它在右侧比它应该更多并且具有比它应该更宽的宽度。有人可以向我解释为什么会这样吗？我怎样才能“调试”它来自己得出这个结论呢？

我已经硬编码了导航的宽度，但我不确定这是不是问题。

这是我的JS：

(function($) {

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

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


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


$("#top-menu li a").hover(function() {
    $el = $("#top-menu li a:hover");
    leftPos = $el.parent().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")
    });    
});
})(jQuery);

起初它正常工作，但是在1-2天之后它就开始不能正常工作了。起初我认为它是从我的自定义扩展到代码，但我删除它并再次相同。

我试图使用此代码：

if($(".current_page_item").length != 0) {
    $magicLine
        .width($(".current_page_item").width())
        .css("left", $(".current_page_item").position().left)
        .data("origLeft", $magicLine.position().left)
        .data("origWidth", $magicLine.width());
} else {
    $magicLine
        .width(114)
        .css("left", 85)
        .data("origLeft", $magicLine.position().left)
        .data("origWidth", $magicLine.width());
}

我尝试使用这个，所以当任何一个菜单项中没有current_page_item类时，我会硬编码它应该得到的位置和宽度（它总是用于第二个菜单项）。但无论如何我删除了它，但仍然无法正常工作。

如果有人解释整个情况会非常好，因为我输了。如果您需要更多信息，请告诉我。

导航菜单问题

0 个答案: