Problema con Jquery, .slideToggle() + .stop()

[Cotelandia]

Buenas! Tengo una duda, yo quiero tener una especie de menu con botones(.boton), al cliquearlos se tiene que desplegar el DIV correspondiente (.desplegar_info) y al darle clic de nuevo a la imagen ocultar el DIV, pero mirando el codigo de Jquery tengo un problema . En el primer botón, si le doy clic dos veces seguidas se traba, a los otros botones que tienen otro codigo con un click no hay problema, pero en caso de que como un boludo te pongas a cliquearlos se abren y cierran una y otra y otra vez, como hago para mejorar el codigo Jquery para que no pase eso?

Por si no entendieron ya que por ahí no me explico del todo bien : Quiero que al cliquear un DIV(.boton) se despliegue el DIV siguiente (.desplegar_info), y al cliquear de nuevo la imagen se esconda la info desplegada. Y que al cliquear varias veces la imagen no termine repitiendose el efecto hasta que cumpla con la cantidad de clics echos


Desde ya muchas gracias. Acá les dejo el HTML, JS y CSS.

Código HTML:

 <div id="menu">
		<div class="boton" id="numero1">
			<a href="#"><img src="http://k38.kn3.net/09D0B3675.png"></a>
		</div>
			
		<div class="desplegar_info" id="numeroa">
			<p>Bla bla bla</p>
			<p>LBLBLBLBLBLBL</p>
			<p><a href="#">ASDASDASD</a></p>
		</div>

		<div class="boton" id="numero2">
			<a href="#"><img src="http://k38.kn3.net/09D0B3675.png"></a>
		</div>
			
		<div class="desplegar_info" id="numerob">
			<p>Bla bla bla</p>
			<p>LBLBLBLBLBLBL</p>
			<p><a href="#">ASDASDASD</a></p>
		</div>

		<div class="boton" id="numero3">
			<a href="#"><img src="http://k38.kn3.net/09D0B3675.png"></a>
		</div>
			
		<div class="desplegar_info" id="numeroc">
			<p>Bla bla bla</p>
			<p>LBLBLBLBLBLBL</p>
			<p><a href="#">ASDASDASD</a></p>
		</div>

		<div class="boton" id="numero4">
			<a href="#"><img src="http://k38.kn3.net/09D0B3675.png"></a>
		</div>
			
		<div class="desplegar_info" id="numerod">
			<p>Bla bla bla</p>
			<p>LBLBLBLBLBLBL</p>
			<p><a href="#">ASDASDASD</a></p>
		</div>
	</div> 

Código HTML:

$(document).ready(function(){

//Ejemplo de la página de Jquery .stop() **Se traba al darle doble clic**

	var $block = $('#numeroa');
	/* Toggle a sliding animation animation */
	$('#numero1').on('click', function() {
	    $block.stop().slideToggle(1000);
	});

//Lo que pude crear xD

	$("#numero2").click(function(e){
	$("#numerob").slideToggle(1000);
	e.preventDefault();
	});

	$("#numero3").click(function(e){
	$("#numeroc").slideToggle(1000);
	e.preventDefault();
	});

	$("#numero4").click(function(e){
	$("#numerod").slideToggle(1000);
	e.preventDefault();
	});

});

Código HTML:

*{margin: 0;padding: 0;}
a{text-decoration: none;color: #000;}
li{list-style: none;}
img{border-style: none;}

body
{
	background: rgb(50,50,50);
	margin: 0 auto;
	text-align: center;
}

#menu
{
	margin: 1em auto;
}

#menu img
{
	width: 20%;
}

.desplegar_info
{
	background: rgb(230,230,230);
	box-shadow: 0 0 .3em .1em rgb(0,0,0) inset;
	display: none;
	margin: 0 auto .4em;
	padding: .3em 0;
	width: 20%;
}

Si por ahí me quieren corregir alguna otra cosa, no me viene mal

[Naahuel]

El problema es que al hacer .stop() la altura del elemento queda almacenada al momento de detenerse la animación y entonces se usará esa alura como altulra del elemento de ahí en adelante (confuso, si).

Yo suelo solucionar ese problema reemplazando .stop() por un .filter(':not(:animated)'). Tu código quedaría así:

Código Javascript:

$(document).ready(function(){
            $('.boton a').click(function(e){
                e.preventDefault();
                $(this)
                    .parent()                   //subir al elemento padre del <a>
                    .next('.desplegar_info')    //Seleccionar el nodo que sigue con esa clase
                    .filter(':not(:animated)')  //Filtrar el que no este siendo animado
                    .slideToggle();             //realizar la animación
            });
        });
 

[sneyder05]

Saludos

Prueba con este código y me cuentas.

Código PHP:

  $(function(){ 
    var available = true; 
    $('.boton') 
    .click(function(){ 
        if(available) 
            available = false; 
        else 
            return; 
        $(this).next().slideToggle(function(){ 
            available = true; 
        }); 
    }); 
});  
   

[Naahuel]

¿Con qué necesidad una bandera? La solución del filtro es más efectiva.

[sneyder05]

Olvidaba la función .filter, bueno recordarla.

Y por cierto creo que Cotelandia quiere el evento en el div , según eso el selector debería ser $('.boton') y te ahorrarías 1 línea de código.

[Naahuel]

Seguro. Lo hice así originalmente pero el enmarcado tiene un <a> dentro del elemento .boton. El evento click se propaga hacia el <a> haciendo que funcione el href. Para evitarlo habría que usar e.stopPropagation().

[sneyder05]

Exacto, aunque podría dejar el código como lo posteaste, siempre y cuando el <a> ocupe todo el espacio que tiene su padre div, en este caso para el usuario es transparente.

Y otra cosa más, según la versión de jQuery que uses, puede prescindir de usar:

Código PHP:

  $(document).ready(  
   

y reemplazar solo por

Código PHP:

  $  
   

, quedando más simple.

[Cotelandia]

Gracias! probe la respuesta del filtro y funciono de 10!

Iniciado por sneyder05

Y otra cosa más, según la versión de jQuery que uses, puede prescindir de usar:

Código PHP:

  $(document).ready(  
   

y reemplazar solo por

Código PHP:

  $  
   

, quedando más simple.

La con la v1.7.2 puedo dejar de colocar

Código PHP:

  $(document).ready(  
   

?

[Cotelandia]

Código HTML:

$(document).ready(function(){
            $('.boton').click(function(e){
                e.preventDefault();
                $(this)
                    .next('.desplegar_info')    //Seleccionar el nodo que sigue con esa clase
                    .filter(':not(:animated)')  //Filtrar el que no este siendo animado
                    .slideToggle(500);             //realizar la animación
                });
});
 

Así quedo el .js, tenia algo de más, la imagen no tenia porque estar encerrada con un <a>, mi error, ni recuedo porque lo puse así. Quite una linea de codigo al sacar el <a> como decian más arriba. Gracias Naahuel y sneyder05.

[sneyder05]

Saludos

Cotelandia, sí, con la versión 1.7 puedes dejar de usar $(document).ready y sustituirlo por solo $.