导航底部滑块

Question

如果游标悬停在导航上，我希望导航下方的边框始终跟随鼠标。

Uncaught TypeError: Cannot read property 'left' of undefined 

JS代码

$(function() {
  var $el, leftPos, newWidth,
      $mainNav = $(".level_1");

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

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

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

  $('.level_1 li:not(".active")').hover(
    function(){ $('#magic-line').addClass('hover'); },
    function(){ $('#magic-line').removeClass('hover'); }
  );
});

HTML

<nav class="mod_customnav block" id="top-nav">

  <ul class="level_1">
    <li class="first"><a href="de/ueber-uns" title="Über uns" class="first">Über uns</a></li>
    <li><a href="de/kontakt" title="Kontakt">Kontakt</a></li>
    <li class="active"><span class="active">Impressum</span></li>
    <li><a href="en/" title="English">English</a></li>
    <li><a href="fr/" title="Français">Français</a></li>
    <li class="navSearch icon last"><a href="de/suche" title="" class="navSearch icon last">Suche</a></li>
  </ul>

</nav>

如果有人可以帮助我，那就太棒了。

谢谢。

Answer 1

您需要更改此行：

$(".active a").position().left

目前你没有在你的里面有一个锚或者有一个活跃的类别，所以这将是未定义的

试

$(".active span").position().left

修改

您可以检查活动的长度以解决您的问题：

var active = $(".active");
if (active.length) {
    $magicLine
        .width(active.width())
        .css("left", active.children('span').position().left)
        .data("origLeft", $magicLine.position().left)
        .data("origWidth", $magicLine.width());
} else {
    $magicLine
        .width(WIDTH_HERE)
        .css("left", LEFT_HERE)
}