Elementor-WordPress中Toggle无法打开，单开控制脚本失效求助

Hey there, let's break down why your current script isn't working and fix it properly.

Why Your Original Script Fails #

Your code only modifies the toggle titles' classes and attributes, but misses two critical pieces:

• Elementor's Toggle components have their own native click event handlers. Without stopping these, your custom logic clashes with Elementor's built-in behavior, which is why none of the toggles open.
• You didn't sync the visibility state of the toggle content panels—even if you fix the title states, the content won't show/hide unless you update its classes too.

Also, targeting all .elementor-tab-title globally isn't precise. Each Toggle is wrapped in a .elementor-toggle-item container, so working with parent containers will avoid affecting unrelated elements.

Fixed Script #

jQuery(document).ready(function($) {
    // Bind click event to all toggle titles
    $('.elementor-tab-title').on('click', function(event) {
        // Stop Elementor's native toggle logic to prevent conflicts
        event.preventDefault();
        event.stopPropagation();

        // Get the parent container of the clicked toggle
        const currentToggle = $(this).closest('.elementor-toggle-item');
        // Get the content panel for this toggle
        const currentContent = currentToggle.find('.elementor-tab-content');

        // Close all other toggles
        $('.elementor-toggle-item').not(currentToggle).each(function() {
            const $otherTitle = $(this).find('.elementor-tab-title');
            const $otherContent = $(this).find('.elementor-tab-content');
            
            $otherTitle.removeClass('elementor-active')
                      .attr('aria-expanded', 'false')
                      .attr('tabindex', '-1')
                      .attr('aria-selected', 'false');
            $otherContent.removeClass('elementor-active').attr('aria-hidden', 'true');
        });

        // Toggle the current toggle's state (adjust if you want forced open only)
        const isActive = $(this).hasClass('elementor-active');
        if (isActive) {
            // Close if currently open (optional)
            $(this).removeClass('elementor-active')
                   .attr('aria-expanded', 'false')
                   .attr('tabindex', '-1')
                   .attr('aria-selected', 'false');
            currentContent.removeClass('elementor-active').attr('aria-hidden', 'true');
        } else {
            // Open if currently closed
            $(this).addClass('elementor-active')
                   .attr('aria-expanded', 'true')
                   .attr('tabindex', '0')
                   .attr('aria-selected', 'true');
            currentContent.addClass('elementor-active').attr('aria-hidden', 'false');
        }
    });
});

Key Improvements #

1. Stop Native Events: Using event.preventDefault() and event.stopPropagation() is the core fix—this prevents Elementor's default logic from overriding your custom behavior.
2. Container-Based Targeting: Using .closest('.elementor-toggle-item') ensures we only modify the clicked toggle and its siblings, not every toggle on the site.
3. Sync Content State: We now update the content panel's elementor-active class and aria-hidden attribute, so the content actually shows or hides when the title is clicked.
4. Flexible Behavior: The script includes toggle logic (click to open/close, with others closing). If you want clicks to always open the toggle (no closing), just remove the isActive check and always set the active state.

Extra Checks #

• Verify Class Names: Use your browser's dev tools to confirm your toggles use .elementor-tab-title, .elementor-tab-content, and .elementor-toggle-item—Elementor rarely changes these, but it's good to double-check.
• Script Placement: Add this script via an Elementor Custom HTML widget (place it at the bottom of your page) or enqueue it via your theme's functions.php to ensure jQuery loads first.
• Conflict Testing: Temporarily disable other plugins to rule out conflicts—sometimes other scripts can interfere with Elementor's event handlers.

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