Change hover to onclick on menu

Question

I've got a local website on WP using DIVI where a header menu got some "menu-item-has-children".

In way to view these sub-menu, I just have to hover on it and when mouseout the sub-menu disappear.

My problem there is that I want these latter sub-menu to open only when I click on it + I want them to stay opened until I click a second time on it to close it.

I've gone throught most of StackOverflow threads but couldn't find a way. The closest code I found is this one ;

jQuery(document).ready(function ($) {
    $(".sub-menu").hide();
    $(".current_page_item .sub-menu").show();
    $("li.menu-item").click(function () { // mouse CLICK instead of hover
        // Only prevent the click on the topmost buttons
        if ($('.sub-menu', this).length >=1) {
            event.preventDefault();
        }
        $(".sub-menu").hide(); // First hide any open menu items
        $(this).find(".sub-menu").show(); // display child
        event.stopPropagation();
    });
});

What this code does to my local website :
- When I click on menu "A", it opens, but doesn't stay open because when I mouseout, it closes - When I clicked on the menu "A", and for e.g want to click on the "B" one, there is a issue where the "A" gets back to "hover" whereas all others are still on "onclick"

I'm pretty lost, if you guys don't want to give me codes, it's okay, just some explanation would be enough

Thanks in advance,

Answer 1

Just found how to do it.

The solution is very simple, it all was just about playing around the "slideToggle" function on the same object I was working on in the main question.

Only one problem won't disappear, if I click once, and then mouseout, the submenu will be open-able via hover. You're forced to force it by a second click if you don't want such a thing to happen. ( If I find how to I'll post it for other strugling but if someone knows, I'll take it !)