Ho alcuni menu HTML, che mostro completamente quando un utente clicca sulla testa di questi menu. Vorrei nascondere questi elementi quando l'utente clicca al di fuori dell'area dei menu.
È possibile fare qualcosa del genere con jQuery?
$("#menuscontainer").clickOutsideThisElement(function() {
// Hide the menus
});
NOTA: l'uso di stopEventPropagation()
è qualcosa che dovrebbe essere evitato poiché interrompe il normale flusso degli eventi nel DOM. Vedere questo articolo per maggiori informazioni. Considerare invece di usare questo metodo
Attacca un evento click al corpo del documento che chiude la finestra. Attaccare un evento click separato al contenitore che ferma la propagazione al corpo del documento.
$(window).click(function() {
//Hide the menus if visible
});
$('#menucontainer').click(function(event){
event.stopPropagation();
});
Ho un'applicazione che funziona in modo simile all'esempio di Eran, eccetto che collego l'evento click al corpo quando apro il menu... Più o meno così:
$('#menucontainer').click(function(event) {
$('html').one('click',function() {
// Hide the menus
});
event.stopPropagation();
});
Maggiori informazioni su jQuery's one()
function
Controllate l'obiettivo dell'evento click della finestra (dovrebbe propagarsi alla finestra, a patto che non sia catturato altrove), e assicuratevi che non sia uno degli elementi del menu. Se non lo è, allora sei fuori dal tuo menu.
Oppure controlla la posizione del clic, e vedi se è contenuto nell'area del menu.