How to make Submenu Appear on Click instead of Hover

Hello,
Im using Kadence Theme as my wordpress theme.
However the default behaviour for submenu to appear is on Hover.
I search around the internet to make it appear on click and this code actually work but not perfect.

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();
    });
});

The submenu appear on click, but only work once.
The second time I want to click it again, it is back to hover behaviour again.
Thank you for a future help