0

ワードプレスサイトで作業し、ナビゲーションメニューバーにカーソルを合わせるとスライドマーカーが追加されます。

ウェブサイト-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 @231行目の位置の値を取得するために間違ったクラスを使用しているようです。

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

.current_page_itemに切り替えるのに適していると思います.current-menu-item。.current_page_itemクラスがすべてのページに入力されているようには見えなかったため、div#slidingArrow要素は位置情報を取得できませんでした。

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 に答える