Currently, I am tackling the challenge of creating a multi-level sub-menu that is triggered by clicks instead of hover actions. However, I'm facing an issue with closing child sub-menus when opening another one. It's crucial for all second-level sub-menus to be closed whenever a new sub-menu is opened.
You can view the project here: . Simply click on the "Productcategorieën" button to reveal the menu. Then, click on "Zonnepanelen" followed by "Verlichting". You'll notice that the "Zonnepanelen" sub-menu fails to close as expected.
Below is the snippet of code I'm currently using:
jQuery('.navigation li.menu-item-has-children > a').click(function (e) {
e.preventDefault();
if (!jQuery(this).parent().hasClass('open-submenu')) {
jQuery(this).parent().parent().find('.open-submenu').removeClass('open-submenu');
jQuery(this).parent().addClass('open-submenu');
} else {
jQuery('.navigation li').removeClass('open-submenu');
jQuery(this).parent().removeClass('open-submenu').find('.open-submenu').removeClass('open-submenu');
}
});
Any suggestions on how to resolve this issue would be greatly appreciated!