Ik heb een aantal HTML menu's, die ik volledig toon wanneer een gebruiker op de kop van deze menu's klikt. Ik zou deze elementen willen verbergen wanneer de gebruiker buiten het menu' gebied klikt.
Is iets dergelijks mogelijk met jQuery?
$("#menuscontainer").clickOutsideThisElement(function() {
// Hide the menus
});
OPMERKING: Het gebruik van
stopEventPropagation()
moet vermeden worden, omdat het de normale event flow in het DOM verbreekt. Zie dit artikel voor meer informatie. Overweeg het gebruik van deze methode in plaats daarvan
Maak een klik-event aan de document body vast die het venster sluit. Maak een aparte klikgebeurtenis aan de container vast die de voortplanting naar de documenttekst stopt.
$(window).click(function() {
//Hide the menus if visible
});
$('#menucontainer').click(function(event){
event.stopPropagation();
});
Ik heb een toepassing die ongeveer hetzelfde werkt als Eran's voorbeeld, behalve dat ik de klikgebeurtenis aan het lichaam vastmaak wanneer ik het menu open... Ongeveer zoals dit:
$('#menucontainer').click(function(event) {
$('html').one('click',function() {
// Hide the menus
});
event.stopPropagation();
});
Meer informatie over jQuery's one()
functie
Controleer het doel van de venster-klikgebeurtenis (het zou zich moeten voortplanten naar het venster, zolang het'niet ergens anders wordt opgevangen), en zorg ervoor dat het'niet een van de menu-elementen is. Als het'niet is, dan ben je buiten je menu.
Of controleer de positie van de klik, en kijk of het'binnen het menugebied ligt.