0

在网站上使用 Magic Line，它可以在主页上完美运行。添加了另一个页面，魔术线不再起作用。开发检查中显示的错误是：

未捕获的类型错误：无法读取未定义的属性“左侧”。

该网站是一个带有 Divi 儿童主题的 wordpress 网站。javascript 文件已在子主题functions.php文件中排队。

Javascript是：

$(document).ready(function() {

var $el, leftPos, newWidth, ratio, origLeft, origRatio,
    origWidth = 100,
    $mainNav  = $("#nav");

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

origLeft  = $(".current_page_item a").position().left;
newWidth  = $(".current_page_item").width();
origRatio = newWidth / $magicLine.width();

$magicLine
    .css("transform", "translateX("+origLeft+"px) scaleX("+origRatio+")");

$("li").not("#magic-line").hover(function() {
    $el = $(this).find("> a");
    leftPos = $el.position().left;
    newWidth = $el.parent().width();
    ratio = newWidth / origWidth;
    $magicLine
        .css("transform", "translateX("+leftPos+"px) scaleX("+ratio+")");
}, function() {
    $magicLine
        .css("transform", "translateX("+origLeft+"px) scaleX("+origRatio+")");
});});

html是：

<div id="navContainer">
<a href="#">
  <div id="logo" class="hvr-bounce-in">
    <img id="mamboLogo" src="mamboLogo.png">
      <div class="logoText">
        <h1 class="title">Mambo Media</h1>
        <p class="tagLine">Film and Animation</p>
      </div>
  </div>
</a>
<div class="nav-wrap">
  <ul class="group" id="nav">
    <li class="nav-item current_page_item"><a href="#" class="nav-link">Home</a></li>
    <li class="nav-item"><a href="#" class="nav-link">Work</a></li>
    <li class="nav-item"><a href="#" class="nav-link">Team</a></li>
    <li class="nav-item"><a href="#" class="nav-link">Contact</a></li>
  </ul>
</div>

任何帮助都会很棒。

4

1 回答 1

0

在阅读了另一个问题后解决了这个问题。javascript是可靠的问题是没有注意html。没有为无效页面上的活动链接正确指定类。菜鸟错误。

于 2018-01-23T15:58:40.343 回答