La idea es simple, hacer click en un botón, se le despliega un panel (ó submenú), y dentro de este panel o submenú hay Enlaces. La meta es que al hacer click dentro de los enlaces se cierre este submenú y pues la página vaya al link dado. Más abajo les dejo el código. El problema en sí es que en Internet Explorer Funciona Perfectamente pero en Firefox, Safari, Chrome, etc, no me cierra el panel al hacer un click interno en éste.
A contínuación les dejo el código completo para que lo prueben.... Gracias...
NOTA: El jQuery ya lo monté en un servidor, es cuestion de que copien y peguen !!
Código HTML:
<!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> <script type="text/javascript" src="http://www.cosmoanimal.com/index/jQuery-1.3-.js"></script> <script type="text/javascript" language="javascript"> $(function(){ $('div#Boton').click ( function() { // -> Se agrega el Panel al mismo Botón $('div#Boton').append('<div id="Panel"><p> </p><p><a href="#MiLink">www.google.com</a></p></div>'); // -> Se cierra el Panel al hacer Click. PROBLEMA: Sólo se cierra en el Navegador IE, en los demás al hacer Click en un Link interno en este Panel, dicho Panel no se cierra y se mantiene abierto. $('div#Boton div#Panel').click (function(){ $('div#Panel').remove(); //return false; // Si se coloca un "return false;", deja de funcionar los links que hayan dentro del panel }); } ).mouseleave ( function() { // -> Se cierra el Panel al dejar a éste. $('div#Panel').remove(); } ); }); </script> <style type="text/css"> #Boton {position:absolute;left:136px;top:36px;width:176px;height:30px;background-color:#FF9900;font-family:Arial, Helvetica, sans-serif; font-size:16px;font-weight:bold;text-align:center;padding-top:10px;} #Panel {position:absolute;left:0px;top:37px;width:347px;height:140px;background-color: #CCC;} </style> </head> <body> <div id="Boton">MI BOTON</div> </body> </html>
