0

在 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。

感谢您的时间和智慧。

4

2 回答 2

1

似乎您使用错误的类来获取#slidingArrowscript.js @ Line 231 中的位置值：

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

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

在 script.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在导航项下居中
  • 在导航中添加了主页
  • 在导航上隐藏主页导航元素

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

于 2013-01-23T18:51:46.847 回答
0

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

script.js 第 231 行：

activeItem = menuList.find('.current_page_item, .current_page_ancestor, .current_page_parent');
于 2013-01-23T18:11:42.740 回答