[SOLUCIONADO] como seleccionar div hijo?

joaquinrot · #1 (**permalink**) 21/05/2013, 00:23

Buenas gente, los saludo antes que nada.
Estoy necesitando que me echen una manito, el tema es que tengo una grilla de imágenes y al presionar sobre una de ellas hago slide de un menú que esta oculto fuera de pantalla, el tema es que el formato de la grilla es obviamente una jerarquía de divs al cual le pongo un id, el tema es que yo quiero que al hacer click sobre otro lugar que no sea la imagen que desplego el menú este se oculte nuevamente, pero no lo logro hacer eh estado muchísimo tiempo leyendo y probando pero no doy con el resultado, porque al ser divs hijos el padre siempre se esta seleccionando, he intentado negando pero por alguna cuestión no me esta dando resultado. Les dejo el código a ver si me pueden ayudar:

HTML:

Código HTML:

<!doctype html>
<html lang="es">

<head>
<meta charset="utf-8"/>
<title>Prueba</title>
	
<link rel="stylesheet" href="css/principal.css" type="text/css" media="screen" />
	<!--[if lt IE 9]>
	<link rel="stylesheet" href="css/ie.css" type="text/css" media="screen" />
	<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
	<![endif]-->
	<!--[if gte IE 9]>
  	<style type="text/css">
    	.gradient {
       		filter: none;
    	}
  	</style>
	<![endif]-->
<link href="css/menu.css" rel="stylesheet" type="text/css" />
<link href="css/alertas.css" rel="stylesheet" type="text/css" />
<link href="css/menubajo.css" rel="stylesheet" type="text/css" />
<link href="css/tablas.css" rel="stylesheet" type="text/css" />
<link href="css/grillaInicio.css" rel="stylesheet" type="text/css" />
<script src="js/dragtable.js" type="text/javascript"></script>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script src="js/barramovil.js" type="text/javascript"></script>
<script src="js/ocultarmostrar.js" type="text/javascript"></script>
<script type="text/javascript" src="js/jquery.equalHeight.js"></script>
<script type="text/javascript" src="js/menu.js"></script>

</head>
<body>
  <div id="menusobre">
  <div id="pestana">
      <div id="cssmenubajo">
          <div class="contenido"><a href="#">Nombrar Carpeta</a></div>
          <div class="contenido"><a href="#">Crear Carpeta</a></div>
          <div class="contenido"><a href="#">Mover Carpeta</a></div>
          <div class="contenido"><a href="#">Configuracion</a></div>
          <div class="linea"><a href="#"></a></div>
          </div>
        </div>
</div>
<header id="encabezado">
	<hgroup>
		<h1 class="titulo_sitio"><a href="index.html">Flexat</a></h1>
        </hgroup>
</header>
<div id="contenedor">
  <div id="grilla">
  <div id="elementos">
      <div>
        <a href="#" id="menu1"><img src="imagenes/Folder.png"/></a>
      </div>
      <div>
        <a href="#" id="menu2"><img src="imagenes/Writing.png"/></a>
      </div>
      <div>
        <a href="#" id="menu3"><img src="imagenes/IM.png"/></a>
      </div>
      <div>
      <a href="#" id="menu4"><img src="imagenes/Graphing-Spreadsheets.png"/></a>
      </div>
      <div>
        <a href="#" id="menu5"><img src="imagenes/Word-Processor.png"/></a>
      </div>
      <div>
        <a href="#" id="menu6"><img src="imagenes/Wrench.png"/></a>
      </div>
      <div>
        <a href="#" id="menu7"><img src="imagenes/Contact.png"/></a>
      </div>
      <div>
        <a href="#" id="menu8"><img src="imagenes/Bookmarks.png"/></a>
      </div>
      <div>
        <a href="#" id="menu9"><img src="imagenes/Lightbulb.png"/></a>
      </div>
      <div>
        <a href="#" id="menu10"><img src="imagenes/Limewire.png"/></a>
      </div>
      <div>
        <a href="#" id="menu11"><img src="imagenes/Mouse.png"/></a>
      </div>
      <div>
        <a href="#" id="menu12"><img src="imagenes/Notepad.png"/></a>
      </div>
      <div>
        <a href="#" id="menu13"><img src="imagenes/Screenshot.png"/></a>
      </div>
      <div>
        <a href="#" id="menu14"><img src="imagenes/Lock.png"/></a>
      </div>
      <div>
        <a href="#" id="menu15"><img src="imagenes/Search.png"/></a>
      </div>
      <div>
        <a href="#" id="menu16"><img src="imagenes/Projector.png"/></a>
      </div>
      <div>
        <a href="#" id="menu17"><img src="imagenes/Slideshow.png"/></a>
      </div>
      <div>
        <a href="#" id="menu18"><img src="imagenes/IllustratorCS2.png"/></a>
      </div>
      </div>
      </div>
</div>
</body>
</html>

JQUERY:

Código PHP:

  var isVisible = false; 
        $(document).ready(function() { 
            $("#menu1").click(function() { 
                if(isVisible){ 
                    $("#pestana").animate({"left" : "0px"}, "slow"); 
                    isVisible = false; 
                } else { 
                    $("#pestana").animate({"left" : "338px"}, "slow"); 
                    isVisible = true; 
                } 
            }); 
           $("#contenedor").not("#menu1").click(function() { 
                if(isVisible){ 
                    $("#pestana").animate({"left" : "0px"}, "slow"); 
                    isVisible = false; 
                } 
            }); 
        });

diurno10 · #2 (**permalink**) 21/05/2013, 06:38

Podes utilizar . Children o . Find pero igual no entiendo lo q necesitas, es decir, q elemento haga tal cosa y q elemento haga tal otra?

joaquinrot · #3 (**permalink**) 21/05/2013, 08:47

Hola diurno, antes que nada gracias por responder, mira:
el elemento pestaña está oculto, ya que tiene un margin de -28em en el css, el tema es que yo hago un animate() trayendolo y volviendolo a su posisión como verás en el JQUERY, en resumen un menú slider de izquierda a derecha.
Cuando yo clickeo sobre una de las imágenes de la grilla este se desplega, el problema es que quiero que se vuelva si clickeo en cualquier otra parte de la grilla de imágenes que no sea "#menu1" o fuera de ella, el problema es que al parecer el selector siempre me selecciona a parte de "#menu1", todos sus elementos padre y abuelo, en resumen quiero clickar en cualquier otra parte que no sea el elemento "#menu1" y que "#pestana" se vuelva a su posisión inicial.

joaquinrot · #4 (**permalink**) 21/05/2013, 09:20

Gente, me respondo a mi mismo, les dejo la solución al problema:
El problema era que debia detener la propagación del evento a todas las clases padre, esto lo de la siguiente manera,

Código PHP:

  var isVisible = false; 
        $(document).ready(function() { 
            $("#elementos").children().click(function(e) { 
                if(isVisible){ 
                    $("#pestana").animate({"left" : "0px"}, "slow"); 
                    isVisible = false; 
                    e.stopPropagation(); 
                } else { 
                    $("#pestana").animate({"left" : "338px"}, "slow"); 
                    isVisible = true; 
                    e.stopPropagation(); 
                } 
            }); 
           $("#contenedor, #grilla, #elementos").click(function() { 
                if(isVisible){ 
                    $("#pestana").animate({"left" : "0px"}, "slow"); 
                    isVisible = false; 
                } 
            }); 
        });

Por lo tanto, si hago click sobre "#menu1", que sus elementos padre son "#elementos", "#grilla", "#contenedor", detengo la propagación con stopPropagation() lo que me permite volver el menú hacia adentro haciendo click en cualquier otro lugar que no sea "#menu1" anteriormente el evento se propagaba a todas los elementos padre causandome problemas ya que abria y por lo tanto cerraba el menú al mismo tiempo.