Foros del Web » Programando para Internet » Jquery »

Ocultar div y su contenido al hacer clic en un enlace del div

Estas en el tema de Ocultar div y su contenido al hacer clic en un enlace del div en el foro de Jquery en Foros del Web. Estoy teniendo problemas con el código a la hora de querer ocultar un div al hacer clic en un enlace que tengo en este mismo ...
  #1 (permalink)  
Antiguo 07/01/2013, 10:52
 
Fecha de Ingreso: agosto-2012
Ubicación: Palma de Mallorca
Mensajes: 36
Antigüedad: 7 años, 3 meses
Puntos: 1
Ocultar div y su contenido al hacer clic en un enlace del div

Estoy teniendo problemas con el código a la hora de querer ocultar un div al hacer clic en un enlace que tengo en este mismo div.

Para que me entendáis, en la pantalla inicial tengo unas imágenes que cuando el usuario clica en una de ellas se muestra un div con información. Esto lo tengo hecho de esta forma en el javascript (jQuery)
Código:
$('#container div:has(.layer)').click( function(layout) {
	$(this).find('.layout').fadeIn('fast');
}); //fin mostrar
Esto me funciona bien y me muestra el div correspondiente. En este div que se muestra al usuario, hay un enlace que no lleva a ninguna parte y lo único que hace es cerrar ese div pero como tengo problemas con el código pues lo que hace es ocultarlo y mostrarlo nuevamente. Este es el código que tengo puesto
Código:
$('#back').click( function(layout) {
	$('.layout').fadeOut('fast');
});
Y este es el código HTML para que veáis como es la estructura, solo dejo la de una sola imagen ya que el resto funciona igual.
Código HTML:
<!-- Enlace a empresa -->
	<div id="image-empresa">
		<img src="empresa_0.png" alt="empresa" />
		<!-- Capa para imagen -->
		<div id="layer-empresa" class="layer">
			<a href="#"><img src="empresa_1.png" alt="empresa" /></a>
		</div>
		<!-- Fin -->
				
		<!-- Capa para el contenido -->
		<div id="layout-empresa" class="layout">
			<img src="telma-content.png" alt="telma" class="telma-content" />
			<img src="empresa-content.png" alt="empresa" class="empresa-content" />
			<div class="block">				
				<h3>Estamos a su servicio desde 1989</h3>
				<p>Empresa homologada por la dirección general de telecomunicaciones nº registro 1307 y por la conselleria de industria con el dqe nº30299</p>
			</div>
			<div id="back">
				<a href="#">Atrás</a>
			</div>							
		</div>
		<!-- Fin capa contenido -->
	</div>
<!-- Fin empresa --> 
  #2 (permalink)  
Antiguo 07/01/2013, 11:27
Avatar de David
Moderador
 
Fecha de Ingreso: abril-2005
Ubicación: In this planet
Mensajes: 15.712
Antigüedad: 14 años, 6 meses
Puntos: 836
Respuesta: Ocultar div y su contenido al hacer clic en un enlace del div

Prueba así:
Código Javascript:
Ver original
  1. $('#back').click( function(e) {
  2.     $('.layout').fadeOut('fast');
  3.     e.stopPropagation();
  4. });
__________________
Por favor, antes de preguntar, revisa la Guía para realizar preguntas.
  #3 (permalink)  
Antiguo 07/01/2013, 11:33
 
Fecha de Ingreso: agosto-2012
Ubicación: Palma de Mallorca
Mensajes: 36
Antigüedad: 7 años, 3 meses
Puntos: 1
Respuesta: Ocultar div y su contenido al hacer clic en un enlace del div

Muchas gracias por la ayuda, funciona perfecto. Pero ahora una cosa que me gustaría saber, por qué me daba ese problema?
  #4 (permalink)  
Antiguo 07/01/2013, 11:38
Avatar de David
Moderador
 
Fecha de Ingreso: abril-2005
Ubicación: In this planet
Mensajes: 15.712
Antigüedad: 14 años, 6 meses
Puntos: 836
Respuesta: Ocultar div y su contenido al hacer clic en un enlace del div

Porque el evento click se propagaba hacia el div que mostraba el .layout

Así que inmediatamente de que empezara el fadeOut() se ejecutaba de nuevo el fadeIn() por el listener del evento click asociado al div padre.

Al ejecutar stopPropagation() se detiene la propagación del evento, así puedes obtener el resultado esperado.
__________________
Por favor, antes de preguntar, revisa la Guía para realizar preguntas.
  #5 (permalink)  
Antiguo 07/01/2013, 15:12
 
Fecha de Ingreso: agosto-2012
Ubicación: Palma de Mallorca
Mensajes: 36
Antigüedad: 7 años, 3 meses
Puntos: 1
Respuesta: Ocultar div y su contenido al hacer clic en un enlace del div

Muchas gracias por la aclaración!

Etiquetas: javascript
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 12:35.