J'ai quelques menus HTML, que j'affiche complètement lorsqu'un utilisateur clique sur l'en-tête de ces menus. Je voudrais masquer ces éléments lorsque l’utilisateur clique en dehors de la zone des menus.
Est-ce que quelque chose comme cela est possible avec jQuery ?
$("#menuscontainer").clickOutsideThisElement(function() {
// Hide the menus
});
NOTE : L'utilisation de
stopEventPropagation()
est à éviter car elle rompt le flux normal des événements dans le DOM. Voir [cet article][1] pour plus d'informations. Utilisez plutôt cette méthode.
Attachez un événement de clic au corps du document qui ferme la fenêtre. Attachez un événement de clic distinct au conteneur qui arrête la propagation vers le corps du document.
$(window).click(function() {
//Hide the menus if visible
});
$('#menucontainer').click(function(event){
event.stopPropagation();
});
[1] : https://css-tricks.com/dangers-stopping-event-propagation/
J'ai une application qui fonctionne de manière similaire à l'exemple d'Eran, sauf que j'attache l'événement de clic au corps lorsque j'ouvre le menu... Un peu comme ceci :
$('#menucontainer').click(function(event) {
$('html').one('click',function() {
// Hide the menus
});
event.stopPropagation();
});
Plus d'informations sur [la fonction one()
de jQuery][1]
Vérifiez la cible de l'événement de clic de la fenêtre (il doit se propager à la fenêtre, à condition qu'il ne soit pas capturé ailleurs), et assurez-vous que ce n'est pas l'un des éléments du menu. Si ce n'est pas le cas, vous êtes en dehors de votre menu.
Vous pouvez aussi vérifier la position du clic et voir s'il est contenu dans la zone du menu.