jQuery - on jPanelMenu how to close toggled submenu when clicking anywhere outside of it?

Question

I'm working on updating the code for an ecommerce site, the mobile menu uses the jQuery plugin jPanelMenu and the code is as follows:

var jPM = $.jPanelMenu({
    menu: '#mainMenu',
    trigger: '.mobileMenuLink',
    duration: 300
});
jPM.on();

$('.styloSearch').clone().prependTo($('#jPanelMenu-menu'));

$('#jPanelMenu-menu').removeClass("sf-menu sf-js-enabled sf-arrows");

$('#jPanelMenu-menu li.menu-parent-item a').click(function(e){
    $(this).siblings("ul").toggle();
    e.preventDefault();

});

The submenu comes up when you click on a menu item, and it can be closed only by clicking on the menu item again, but I want to be able to click anywhere outside to close the submenu.

Any idea how to achieve this?

Thanks a lot!

Answer 1

use the $('*') selector which selects all elements

you need to keep the original function too, and add this:

$('*').click(function(e){
    $(this).siblings("ul").hide();
    e.preventDefault();
});