Solved Custom menu not working everytime

Hi fellow Divians

I have an issue with my custom Divi menu. It works, but not every time. I think it might be a loading problem; however, I'm not sure.

The issue occurs sometimes on both mobile and desktop when the menu opens the test-sub-menu-container or sometime only direct to parent link (should not have default functionality). Sometimes, the parent links (to trigger the menu) are not treated with preventDefault.

Does anybody have a clue? All plugins are deactivated.

NB: Integration throught Divi's own integrate -> script. Has also been done.

Jquery:

Code:

$(document).ready(function() {
    var $mobileMenuButton = $("#test-mobile-menu-button");
    var $mobileMenu = $("#test-mobile-menu");
    var $mainMenu = $("#test-menu");

    $mobileMenuButton.on("click", function(event) {
        event.preventDefault();
        event.stopPropagation();
        console.log("Mobil menu klik");
        toggleMenu($mobileMenu);
    });

    $(document).on("click", function(event) {
        console.log("klik main");
        if (!$(event.target).closest('#test-menu').length && !$(event.target).closest('#test-mobile-menu-button').length) {
            console.log("Luk menuer");
            closeMenus();
        }
    });

    $mainMenu.on("click", ".trigger-test-sub-menu-container", function(event) {
        event.preventDefault();
        event.stopPropagation();
        console.log("Main Menu - Desktop ");
        toggleMenu($(this).find(".test-sub-menu-container"));
    });


    $mobileMenu.on("click", ".trigger-test-sub-menu-container > a", function(event) {
        event.preventDefault();
        event.stopPropagation();
        console.log("(Mobil)");
        var $subMenu = $(this).closest(".trigger-test-sub-menu-container").find(".test-sub-menu-container");
        toggleMenu($subMenu);
    });

    function toggleMenu($menu) {
        if ($menu.is(":visible")) {
            console.log("Luk sub-menu");
            $menu.hide();
        } else {
            console.log("Sub-menu aaben");
            closeMenus();
            $menu.show();
        }
    }

    function closeMenus() {
        console.log("Luk menuer");
        $(".test-sub-menu-container").hide();
    }
});

Enqueue function:

Code:

function enqueue_test_menu_scripts() {
    // Enqueue jQuery
    wp_enqueue_script('jquery');

    // Enqueue menu script
        wp_enqueue_script('test-menu-mobile-js', get_template_directory_uri() . '/js/test-menu-mobile.js', array('jquery'), null, true, 0);

}

add_action('wp_enqueue_scripts', 'enqueue_test_menu_scripts');

 

Hi Admin,

I apologize for the overly vague question. I have already found a solution:

To trigger any child elements via "menu-item-has-children," I created a custom "walker" to convert all "menu-item-has-children" from <a> to <button> and then restyled the button to have the same styles as <a>.

This also has the benefit of having a better control on mobile devices (in my opinion).

Thanks for the great forum!