WordPress Divi子主题Magic Line非首页报错：origLeft未定义

First, let's break down the issue you're seeing: the Uncaught TypeError: Cannot read property 'left' of undefined happens because your JavaScript code is trying to access the position of an element that doesn't exist on new pages. Here's why and how to fix it:

Root Cause #

On your homepage, the active menu item uses the current_page_item class, but on other WordPress pages (especially when using custom menus like Divi does), the active menu item is marked with current-menu-item instead. Your original code only looks for current_page_item, so it can't find the active element on new pages—leading to the undefined error when trying to get its .left position.

Corrected JavaScript Code #

Here's the fixed version of your script, with key improvements:

$(document).ready(function() {
    var $el, leftPos, newWidth, ratio, origLeft, origRatio, origWidth = 100,
        $mainNav = $("#nav");
    
    // Append magic line only if the nav container exists
    if ($mainNav.length) {
        $mainNav.append("<li id='magic-line'></li>");
        var $magicLine = $("#magic-line");
        
        // Target both WordPress active menu classes for cross-page compatibility
        var $activeItem = $(".current_page_item, .current-menu-item");
        
        // Set safe default values if no active menu item is found
        if ($activeItem.length) {
            origLeft = $activeItem.find("> a").position().left;
            newWidth = $activeItem.width();
            origRatio = newWidth / $magicLine.width();
        } else {
            origLeft = 0;
            origRatio = 1;
        }
        
        // Initialize magic line to active position (or default)
        $magicLine.css("transform", "translateX(" + origLeft + "px) scaleX(" + origRatio + ")");
        
        // Hover effect targeting only actual nav items (more specific than all li elements)
        $(".nav-item").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 + ")");
        });
    }
});

Key Changes Made #

• Dual Active Class Selector: Uses .current_page_item, .current-menu-item to target both WordPress active menu classes, ensuring the script finds the active item on all pages.
• Existence Checks: Adds checks for $mainNav and $activeItem to avoid errors if elements aren't found, falling back to safe default values.
• Specific Hover Target: Uses .nav-item instead of $("li").not("#magic-line") to directly target menu items, reducing unintended interactions with other list elements.
• Robust Initialization: Ensures the magic line is only appended if the nav exists, preventing unnecessary DOM operations.

Additional Checks #

1. Verify Divi Menu Settings: In your WordPress admin, go to Appearance > Menus and confirm your new pages are added to the main menu. Divi should automatically apply the current-menu-item class to the active page's menu item.
2. Clear Cache: If you're using a caching plugin (like WP Rocket or Divi's built-in cache), clear it after applying the code change to ensure the updated script loads properly.

内容的提问来源于stack exchange，提问作者Bradders