ocultar menú al pulsar fuera de él

[dryant]

Iniciado por Alexis88

Aplica el evento click en el documento para ejecutar la función que oculte al menú y utiliza el selector CSS :not para excluir al menú y al botón.

Código Javascript:

$("*:not(#mobile-main-menu, #mobile-main-button)").on("click", function(){
    if ($("#mobile-main-menu").is(":visible")){
        $("#mobile-main-menu").slideUp();
    }
});
 

De esta manera, cuando des un clic en cualquier parte que no sea el menú ni el botón y solo si el menú es visible, se ocultará.

Saludos

Hola Gracias por tu respuesta.

He modificado el codigo quedando así:

Código:

<!-- Script menú desplegable -->
<script type="text/javascript">
	function toggleMobileMenu(){
		var $mobileMenu = $('#mobile-main-menu');
		$mobileMenu.slideToggle('fast');
	}

	$(document).ready(function() {
		$('#mobile-main-button').on('click', toggleMobileMenu);
	});

	$("*:not(#mobile-main-menu, #mobile-main-button)").on("click", function(){
	    if ($("#mobile-main-menu").is(":visible")){
	        $("#mobile-main-menu").slideUp();
	    }
	});
</script>

pero ahora cuando pulso el boton, se abre el menu, y con la misma se vuelve a cerrar en plan yoyo.

Porque pasa esto?

Gracias!