Javascript 未捕获的 TypeError 在一页上，但在下一页上有效

Question

在wordpress网站上工作，并在将鼠标悬停在导航菜单栏上时添加滑动标记。

网站 - http://avuedesigns.com/iaq

在 chrome 开发者工具中，它显示此错误：

Uncaught TypeError: Cannot read property 'left' of undefined script.js:242
(anonymous function) script.js:242
v.event.special.(anonymous function).handle jquery.js:2
v.event.dispatch jquery.js:2
o.handle.u

菜单唯一有效的页面是购物车页面和我的帐户页面。我假设它可能与图书馆的冲突，因为我几天前遇到了类似的情况。但是我不知道解决这个问题的正确方法，并希望找到指导，所以我不会在简单的问题上浪费任何人的时间。

我确实知道标记在工作页面上关闭，没有时间调整它，想先让它工作=P。

感谢您的时间和智慧。

Answer 1

似乎您使用了错误的类来获取脚本中#slidingArrow的位置值.js @ 第 231 行：

activeItem = menuList.find('.current_page_item, .current_page_ancestor, .current_page_parent');

我认为你更适合将.current_page_item换成.current-menu-item..current_page_item类似乎没有填充到所有页面上，因此#slidingArrowdiv 元素无法获取任何定位信息。

在脚本中.js以下是我对menuSlidingArrow()所做的更改：

function menuSlidingArrow() {
    if(!($j('html').hasClass('oldie'))) {
        var mainmenu    = $j('.menu-content'),
            arrow       = $j('#slidingArrow'),
            menuList    = mainmenu.find('ul.menu'),
            activeItem  = menuList.find('.current-menu-item, .current_page_ancestor, .current_page_parent'); //remove .current_page_item
        $j(window).load(function() {
            arrow.css({ 'left':(activeItem.position().left + ((activeItem.outerWidth() - 48)/2) ) -6});
            arrow.fadeIn('slow');
        });
        menuList.children().hover(function(){
            arrow.animate({ 'left':($j(this).position().left + (($j(this).outerWidth() - 48)/2) ) -6},
                { queue: false, easing: 'easeOutQuad', duration: 250 });
        },function(){
            arrow.animate({ 'left':(activeItem.position().left + ((activeItem.outerWidth() - 48)/2) ) -6},
                { queue: false, easing: 'easeOutQuad', duration: 250 });
        });
    }
}

我还需要以下CSS才能让它工作：

#menu-main-menu {
    margin-left:68px;
}
#menu-item-8197 a { /* hide home navigation item */
    color:#fff;
}
#slidingArrow {
    margin-left:77px;
}

最后，请确保将"主页"页面添加到顶部导航。您将希望将其添加为导航上的第一项。

总而言之，我更改/添加了：

• .current_page_item改为.current-menu-item
• 新增#slidingArrow { margin-left: 77px; }、menu-item-8197 a { color:#fff; }、#menu-main-menu { margin-left:68px; }
• 将计算修改为在导航项下居中#slidingArrow
• 已将主页添加到导航
• 在导航中隐藏主页导航元素

让我知道这对您来说是如何工作的，如果您遇到任何错误，我很乐意为您更正答案。

Answer 2

这个函数不返回任何内容，所以 activeItem 被定义为一个空数组，这就是你的代码不起作用的原因，检查你发送到menuList.find()函数的其他页面，看看它们是否不同。

脚本.js第 231 行：

activeItem = menuList.find('.current_page_item, .current_page_ancestor, .current_page_parent');