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;
}
});
});