J’ai le cas d’un menu à onglets (tabs) centré dans la page via la classe .container du composant Grille de Bootstrap 3. Je souhaite qu’au clic à l’extérieur de mon menu, la sous-partie ouverte se referme.
Base du menu en Demo sur jsFiddle
Problème : lorsque je détermine à l’aide de jQuery que la zone du sous-menu ne doit pas se refermer au clic, les marges extérieures gauche/droite (en rose dans ma capture) sont également prises en compte.
Solution : on attribue une propriété CSS bidon à l’élément incriminé (ici ‘min-height’) et on vérifie sa présence dans le DOM au clic sur ce dernier avant d’exécuter une fonction destinée à refermer le menu.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 |
// On commence par déterminer sur quels éléments la navigation ne doit PAS se fermer au clic var facetNavTargetElements = $('ul.facet-nav, .facet-nav-subitem-content'); // On crée un fonction 'DOMreset' qui agit sur le menu pour le refermer function DOMreset(){ ulFacetNav.removeAttr('style'); aFacetNavItemLevel0Link.each(function(){ $(this).removeClass('is-active'); }); $('ul.facet-nav-sublevel').each(function(){ $(this).addClass('is-closed'); }); } // On exécute la fonction 'DOMreset' au clic sur n'importe quel élément de la page $(document).on('click', function(){ DOMreset(); }); // Pour l'élément auquel nous avons attribué la classe [[code]]czoxMDpcIi5jb250YWluZXJcIjt7WyYqJl19[[/code]] de Bootstrap pour le centrer, // on attribue une propriété CSS bidon (ici 'min-height') et on vérifie sa présence dans le DOM au clic avant d'exécuter la fonction 'DOMreset'. $('ul.facet-nav-sublevel').css('min-height', '1px').on('click', function(){ if( $(this).css('min-height') != null ) { DOMreset(); } }); // Pour finir, on annule les effets du clic sur les éléments pour lesquels nous avons déterminé que // la navigation ne doit PAS se refermer au clic facetNavTargetElements.on('click', function(e){ e.stopPropagation(); }); |