JavaScript - Script para desplazar menú no se ejecuta en bucle

 
Vista:
Imágen de perfil de JetLagFox

Script para desplazar menú no se ejecuta en bucle

Publicado por JetLagFox (8 intervenciones) el 05/11/2016 23:51:36
Buenas,

He creado un script para que el menú aparezca y desaparezca. En teoría la sintaxis es correcta pero en la práctica el menú sólo funciona la primera vez que haces click, las siguientes el menú se oculta y aparece con un sólo click, cuando debería desaparecer o aparecer, pero no las dos a la vez.

El código es el siguiente:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
$(document).ready(main);
 
var contador = 1;
 
function main(){
	$('.boton_menu').click(function(){
 
		if(contador == 1){
			$('.menu').animate({
				left: '0'
			});
			contador = 0;
		} else {
			$('.menu').animate({
				left: '-100%'
			});
			contador = 1;
		}
 
	});
 
 
	$('.submenu').click(function(){
	    $(this).children('ul').slideToggle();
	});
};

Saludos y gracias.
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder
Imágen de perfil de xve
Val: 3.162
Oro
Ha mantenido su posición en JavaScript (en relación al último mes)
Gráfica de JavaScript

Script para desplazar menú no se ejecuta en bucle

Publicado por xve (2100 intervenciones) el 06/11/2016 12:08:13
Hola, he realizado un simple código de ejemplo con tu código y me funciona perfectamente todas las veces...

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<script src="http://code.jquery.com/jquery-latest.js"></script>
	<style>
	.menu {display:inline-block;position:relative}
	</style>
</head>
<body>
<div class='boton_menu'>boton</div>
<div class='menu'>menu</div>
</body>
</html>
<script>
$(document).ready(main);
 
var contador = 1;
 
function main(){
	$('.boton_menu').click(function(){
 
		if(contador == 1){
			$('.menu').animate({
				left: '0'
			});
			contador = 0;
		} else {
			$('.menu').animate({
				left: '-100%'
			});
			contador = 1;
		}
 
	});
};
</script>
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de JetLagFox

Script para desplazar menú no se ejecuta en bucle

Publicado por JetLagFox (8 intervenciones) el 06/11/2016 13:09:35
Gracias por la respuesta.

He seguido probándolo pero sigo con el mismo problema. He revisado que no tenga código CSS que interfiera con el código del script, pero no encuentro nada.

Cuando recargo la página el menú está oculto en la versión de móvil, al darle click al icono del menú éste aparece, pero al volver a darle al icono del menú para que se oculte, se oculta y vuelve a aparecer. No entiendo cómo puede estar pasando esto, debe ser otra cosa pero no se me ocurre cómo encontrar la interferencia.

Antes tenía hecha la transición del menú con CSS, pero me daba problemas y la he quitado.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de JetLagFox

Script para desplazar menú no se ejecuta en bucle

Publicado por JetLagFox (8 intervenciones) el 06/11/2016 17:36:56
Solucionado!

Ha sido quitar el input del tipo checkbox que tenía asociado a un label, que era donde se hace click para desplegar el menú y ya está correcto. Supongo que hacía una doble comprobación y por eso me lo cerraba y abría con un sólo click.

Muchas gracias!
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar