Pulsar fuera y cerrar el menu

neodani · #1 (**permalink**) 06/12/2010, 04:32

Buenas,

Tengo un problema con este script he conseguido que funcione casi como quiero, pulsas sobre la bandera y te muestra un menu escondido para que marques otro idioma, sin embargo solo se cierra cuando se vuelve a pulsar sobre la bandera.

Se puede hacer que también se cierre si se pulsa fuera, en cualquier otro lugar de la página?

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 xml:lang="es" xmlns="http://www.w3.org/1999/xhtml" lang="es"><head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="Content-Language" content="es">
<link rel="stylesheet" type="text/css" href="reset-fonts-grids.css"> 
<link rel="stylesheet" type="text/css" href="common.css">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
     <script language="javascript">
     $(document).ready(function() {
          $('#menutoggle').click(function() {
               if ($('#lngMenu').is(":hidden"))
               {
                    $('#lngMenu').fadeIn('fast');
               } else {
                    $('#lngMenu').fadeOut('fast');
               }
               return false;
          });
     });
     </script>
</head>
<body>
<img id="menutoggle" src="es.gif" alt="Language" height="11" width="16">
<ul style="-moz-user-select: none; display: none; top: 63px; left: 656.5px;" id="lngMenu" class="contextMenu">
  <li class=""><a href="http://www.mindomo.com/login.htm?lang=en">English</a></li> 
  <li><a href="http://www.mindomo.com/login.htm?lang=de">Deutsch</a></li> 
  <li><a href="http://www.mindomo.com/login.htm?lang=es">Español</a></li> 
  <li><a href="http://www.mindomo.com/login.htm?lang=fr">Français</a></li> 
  <li><a href="http://www.mindomo.com/login.htm?lang=it">Italiano</a></li> 
  <li><a href="http://www.mindomo.com/login.htm?lang=se">Svenska</a></li> 
</ul> 
</body>
</html>

Muchas gracias de antemano!

echoTREBOR · #2 (**permalink**) 06/12/2010, 08:27

Utiliza el Evento blur... que se activa cuando el elemento pierde el enfoque. osea cuando el usuario hace click en cualquier otra parte del DOM.

Ejemplo.

Código Javascript:

Ver original$('#menutoggle').blur(function(){$('#lngMenu').fadeOut('fast');})

neodani · #3 (**permalink**) 06/12/2010, 09:20

Cita:

Iniciado por echoTREBOR

Utiliza el Evento blur... que se activa cuando el elemento pierde el enfoque. osea cuando el usuario hace click en cualquier otra parte del DOM.

Ejemplo.

Código Javascript:

Ver original$('#menutoggle').blur(function(){$('#lngMenu').fadeOut('fast');})

No funciona de la forma que mencionas...

Código Javascript:

Ver original<script language="javascript">
     $(document).ready(function() {
          $('#menutoggle').click(function() {
               if ($('#lngMenu').is(":hidden"))
               {
                    $('#lngMenu').fadeIn('fast');
               } else {
                    $('#lngMenu').fadeOut('fast');
               }
               return false;
          });
          $('#menutoggle').blur(function(){$('#lngMenu').fadeOut('fast');})
     });
     </script>

¿Alguna idea?

Muchas gracias

Sourcegeek · #4 (**permalink**) 06/12/2010, 15:01

Soy principiante con jQuery, pero supongo que se hace asi;

Código Javascript:

Ver original$('body').click(function () {
     $('#lngMenu').fadeOut('fast');
});

neodani · #5 (**permalink**) 06/12/2010, 15:44

Cita:

Iniciado por Sourcegeek

Soy principiante con jQuery, pero supongo que se hace asi;

Código Javascript:

Ver original$('body').click(function () {
     $('#lngMenu').fadeOut('fast');
});

Haciendolo así sí que funciona Sourcegeek! pero no se que pasa si tuvieras que definir alguna otra propiedad sobre el elemento 'body' no sé, si al usar el 'body' de esta forma complica las cosas con futuras llamadas.

Alguien nos puede decir si es la forma correcta/adecuada?

Muchas gracias

Sourcegeek · #6 (**permalink**) 06/12/2010, 16:06

No, no hay problema si hay otra propiedad dentro de <body></body>
Por ejemplo;
<body>
<div id="eje">
Ejemplo
</div>
</body>
Si hago clic en el div 'eje' igual va a cerrar el menu porque es parte de body

Saludos!