[SOLUCIONADO] Jquery Display:Block en moviles

[javy7v]

Buenas amigos,

Tengo un problema con el menu responsive en moviles y es que quiero que se despliegue cuando haces click sobre el header pero solo cuando los pixeles son menos que X.

He estado probando con Jquery esto :

Código:

<script type="text/javascript">
		(function($) {
			if (window.matchMedia('(max-width: 767px)').matches) {
			$(".navbar-header").mouseenter(function(event){
			$(".collapse").css("display", "block");
			});
			}
		})(jQuery);
	   </script>

Y no funciona , no hace el display:block a collapse que es donde despliega el menu.

En cambio si no pongo que se active con nm

[w3w3b]

Puede que sea por el evento .mouseenter si es para moviles no sería mejor utilizar el evento .click.

Llega a entrar la aplicación dentro del

Código Javascript:

$(".navbar-header").mouseenter(function(event){
            $(".collapse").css("display", "block");
            });
 

Además en vez de usar el display:block. Seguramente usando el .toggle() de Jquerypodrás lograr el efecto que deseas para tu menu.

Un Saludo ya me dices si funciona.

[javy7v]

Buenas

Gracias por la respuesta ya encontre la solución final , la cuento por si a alguien le vale.

El mouseenter le tenia como prueba para ver si hacia algo , finalmente vi que poniendo click y usando body si que se desplegaba el menu entonces el codigo estaba bien lo que estaba mal era el elemento que habia elegido para clickar antes.

Al final como dices usar la propiedad css para jugar con el display no era lo mas indicado , ha quedado asi el codigo query:

Código:

	(function($) {
		   $(".icoMovil").click(function () {
			  $(".collapse").each(function() {
				displaying = $(this).css("display");
				if(displaying == "block") {
				  $(this).fadeOut('slow',function() {
				   $(this).css("display","none");
				  });
				} else {
				  $(this).fadeIn('slow',function() {
					$(this).css("display","block");
				  });
				}
			  });
			});
		  })(jQuery);

IcoMovil es un icono que he metido en el nav , para clickar sobre el.

Por otro lado desde el CSS he hecho que por defecto sea display:none este icono y con media querie que aparezca solo en pantallas pequeñas.

He estado haciendo pruebas y por el momento perfecto , aqui el codigo del CSS:

Código:

.icoMovil{
display:none;
}
@media (max-width: 500px) {
.icoMovil{
display:block;
position:relative;
float:right;
margin-top:5%;
margin-right:5%;
}
}

Y eso es todo ahora estoy con otro problemilla pero eso ya es de Bootrstrap asi que si no lo soluciono hare otro tema :D