Sous-menu multi-niveau ne fermant pas les enfants sur le clic

Question

En ce moment je travaille sur un sous-menu multi-niveau basé sur le clic au lieu de hover. J'ai un problème avec la fermeture du sous-menu enfant lors de l'ouverture d'un autre sous-menu. Tous les sous-menus de deuxième niveau doivent être fermés lors de l'ouverture d'un autre sous-menu.

Voici le projet: https://dev.webrandcreative.nl/bespaarbazaar/. Cliquez sur le bouton "Productcategorieën" pour afficher le menu. Cliquez sur "Zonnepanelen" et immédiatement après sur "Verlichting". Vous verrez que le sous-menu "Zonnepanelen" ne se ferme pas.

Voici mon code:

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

Comment puis-je résoudre ce problème?

Answer 1

Cela se produit parce que vous ne fermez pas le sous-menu déjà ouvert.

Dans cette ligne.

jQuery(this).parent().parent().find('.open-submenu').removeClass('open-submenu'); 

Le parent() parent() n'atteint le niveau de .menu-item de ce .sub-menu particulier. Et par conséquent ne ferme pas .open-submenu d'autres .menu-item s.

Alors assurez-vous de fermer tous les .open-submenu existants avant d'en ouvrir un nouveau.

Le code suivant devrait fonctionner:

jQuery('.navigation li.menu-item-has-children > a').click(function (e) { 
    e.preventDefault(); 
    if (!jQuery(this).parent().hasClass('open-submenu')) { 
     jQuery('.navigation').find('.open-submenu').removeClass('open-submenu'); 
     jQuery(this).parent().addClass('open-submenu'); 
    } else { 
     jQuery(this).parent().removeClass('open-submenu').find('.open-submenu').removeClass('open-submenu'); 
    } 
});