Ocultar DIV al hacer clic fuera

iBioHacker · #1 (**permalink**) 04/08/2012, 13:12

Hola el siguiente codigo oculta un div al hacer clic fuera usando .bur(), el problema es que la capa desaparece antes de poder hacer clic en alguno de los enlaces. Como podria solucionar esto. Nota: Estoy usando jQuery

El siguiente codigo oculta la capa "toolbar-menu" al quitar el foco del enlace que la abrio e intercambia la clase del enlace para mostrarlo activo o inactivo

Código HTML:

<a href="#" id="toolbar-bullet" onclick="showMenuUser">Flechita</a>

<div id="toolbar-menu" style="display:none;">
<ul>
<li><a href="#">Editar</a></li>
<li><a href="cerrar.html">Cerrar</a></li>
</ul>
</div>

Funcion Toogle

Código:

		function showMenuUser(){
			var x=$('#toolbar-menu');
			 var y=$('#toolbar-bullet');

			if(x.css('display')=='block'){ 
				x.hide(0); 
				y.attr('class','toolbar-options');
			}else{
				x.show(0); 
				y.attr('class','toolbar-options-active');
			}
		}

Punto de entrada

Código:

$(document).ready(function(e) {
	var x=$('#toolbar-menu');
	var y=$('#toolbar-bullet');

	y.blur(function(){
		x.hide(0); 
		y.attr('class','toolbar-options');
      });


});

Espero y puedan ayudarme, saludos desde México

gebremswar · #2 (**permalink**) 05/08/2012, 02:27

Hola iBioHacker, que tal.

Podrías hacer uso del método .delay() para retrasar la ejecución de una determinada función.

Se me ocurrió modificar tu código y quitar el método .bur() ya que uso que le haz dado, a mi parecer, no concuerda con lo que deseas hacer.

Código Javascript:

Ver original<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>@GBreagan - sin .bur()</title>
<script>
    $(document).ready(function() {
        $("#link").click(function(e) {
            e.preventDefault();
            var x = $('#toolbar-menu');
            var y = $('#toolbar-bullet');
            x.hide(0);
            y.attr('class','toolbar-options');
        });
        $("#toolbar-bullet").click(function(e) {
            e.preventDefault()
            var x = $('#toolbar-menu');
            var y = $('#toolbar-bullet');
            if (x.css('display')=='block') {
                x.hide(0);
                y.attr('class','toolbar-options');
            } else {
                x.show(0);
                y.attr('class','toolbar-options-active');
            }
        });
    });
</script>
</head>
<body>
    <a href="#" id="toolbar-bullet">Flechita</a>
    <div id="toolbar-menu" style="display:none;">
        <ul>
            <li><a href="#" id="link">Editar</a></li>
        </ul>
    </div>
</body>
</html>

PHPcool · #3 (**permalink**) 05/09/2012, 00:33

Hola, olle man trata de usar esto a ver klk

Código Javascript:

Ver original$(document).on("ready",function(){
    $(document).on("click", function(e){    
        if($(e.target).attr("class") != "myclass"){
            $(".mydiv").hide();
        }
    });
});

Acuerdate de usar la version 1.7 en adelante en jQ!

iBioHacker · #4 (**permalink**) 07/10/2012, 17:14

El objetivo es IMITAR el comportamiento del menu construido con un iFrame que esta en Outlook.com, en ese menu hay separadores entre los enlaces y algunos cuadros para seleccionar el color de la interfaz, el menu SIEMPRE esta activo sin importar las acciones que se realizen dentro de el , HASTA que el usuario haga clic fuera .

Las soluciones que he probado no funcionan como el menu de Outlook.com, estos son los inconvenientes:

- En una solución me cierra el menu antes de que pueda hacer clic a un enlace

- En otra si despliego el menu, me cambio de ventana del navegador y regreso al menu este se cierra. No debe hacer eso

- En otras soluciones el menu se comporta como cualquier otro: Desplegar menu > Ejecutar accion > Cerrar menu. Si el usuario cambiara colores de la interfaz tendria q dar varios clics siempre para cambiar el color (por ejemplo).

- Probando mas soluciones esta el Hover sobre el menu y mostar la capa. En lo personal me molesta ese efecto ya que no siempre kiero ver que tiene cada menu y si paso el mouse inocentemente por un enlace siempre me esta molestando el despliegue del menu activo.

- En otra mas esta ocultar menu con un setTimeout() luego de ejecutar acciones, el usuario al ver que el menu no se oculta inmediatamente al hacer clic; tiende a dar varios clics, hasta que finalmente se oculta y cree hay un error en mi proyecto que retraza los clics (aun dejandolo con 1000 milisegundos llegan a notar el retrazo y les molesta)

- Una solución mas crea el efecto "Burbujeo" (ocultando/mostrando capa) es mas obvio en IE y hay que colocar un parche con e.PreventDefault(); o return false; pero aun asi no funciona como tal.

- Otra solucion propone colocar una capa "overlay" para cubrir la interfaz y al hacer clic sobre esa capa cerrara el menu. MAL. Las aplicaciones que hacen uso de menus con clic fuera de el, si permiten ejecutar otra accion en cualquier lugar de la interfaz y posteriormente se oculta el menu que estaba activo. En este ejemplo no ejecuta nada MAS que ocultar el menu, hay q dar un nuevo clic para ejecutar otra accion en la interfaz.

En fin he leido mucho estos ultimos 2 meses y ya desarrolle una solucion que se basa en una variable almacenada en el DOM usando data() de jQuery de esa forma la checkeo y usando el evento click de body puedo determinar si se ocultara o no la capa. De antemano muchas gracias gebremswar y PHPcool

$(document.body).click(function(){ var v=$(document).data(variable); if(v=='0'){ capa.slideUp(200); } });