Mostrar div onclick

pitufoweb · #1 (**permalink**) 06/03/2013, 04:00

Hola a todos,

Lo que intento hacer es mostrar un div cuando se le de click a un enlace. Estoy probando con el siguiente código:

Código:

$(".mostrar").click(function(){
  $(this).next(".contenido-a-mostrar").toggle();
  $(this).toggleClass("active");
});

Código HTML:

<a href="#" class="mostrar">Mostrar Contenido</a>
                
<div class="contenido-a-mostrar">
  <p>Este contenido esta oculto</p>
</div>

Con ese código se muestra y oculta el div dando click en el enlace. Pero lo que quiero es que se oculte dando click en cualquier lugar del body y no solo en el enlace.

Ademas no se si lo estoy haciendo bien o si hay una mejor manera de hacerlo.

Aquí pueden ver como funciona ahora: http://jsfiddle.net/pitufoweb/NBYKZ/

Saludos

Fuzzylog · #2 (**permalink**) 06/03/2013, 06:30

<body><div id="divOcultacionClick">...tuHtmlAqui...</div></body>

Le asocias el click al id de este elemento y haces que busque lo que quiera ocultar.

No estoy seguro pero es posible que tengas que jugar con el z-index de los divs por que si no puede que se detecte el click sobre el body y priorice sobre el click al link.

chuidiang · #3 (**permalink**) 06/03/2013, 06:35

Pon un evento de click en el body $('body').click(...).
En la función, en vez de $(this) tendrás que usar un $('.contenido-a-mostrar") para ocultar el contenido.

El el click del enlace, tienes también que cancelar el evento para que no se propague hasta el body y lo oculte, llamando a event.stopPropagation() http://api.jquery.com/event.stopPropagation/

Código Javascript:

Ver original$(".mostrar").click(function(event){
  $(this).next(".contenido-a-mostrar").toggle();
  $(this).toggleClass("active");
  event.stopPropagation(); // Para evitar que llegue también al body.
});

Se bueno.

pitufoweb · #4 (**permalink**) 07/03/2013, 13:05

Gracias a los dos por la ayuda.

Voy a probar con eso que me dijeron y les digo como me fue.

Saludos

emprear · #5 (**permalink**) 07/03/2013, 17:26

Redondeando la idea de @chuidiang, dependiendo del contenido de tu "body" puede que no te funcione correctamente, es preferible que se lo apliques al html completo
imaginate este ejemplo

Código HTML:

Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>titulo</title> 
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
//<![CDATA[
$(document).ready(function(){
$(".contenido-a-mostrar").hide();
$(".mostrar").click(function(event){
$(".contenido-a-mostrar").toggle();
  $(this).toggleClass("active");
  event.stopPropagation(); // Para evitar que llegue también al body.
});
$("html").click(function(){ // reemplaza html por body
$(".contenido-a-mostrar").hide();
});
});
//]]>
</script>
</head>
<body>
<a href="#" class="mostrar">Mostrar Contenido</a>
<div class="contenido-a-mostrar">
  <p>Este contenido esta oculto</p>
</div>
</body>
</html>

Saludos