[jQuery-es] Simplificar código

stripTM fer en striptm.com
Lun Mar 5 17:00:32 PST 2007


Ando mosqueado con una historia que estoy montando ya que me queda un 
código bastante feo para lo chulo que quedan otras cosas bastante más 
complejidad, reconozco que debería haber reflexionado un poco antes de 
enviar esto, pero no puedo aguantarme.

Tenemos un html con esta pinta
    <ul id="piemediosmenu">
       <li><a href="...">Primero</a></li>
       <li><a href="...">Segundo</a></li>
    </ul>
    <div id="modulo1">Bla, bla, bla, <a href="...">ir a otro sitio</a></div>
    <div id="modulo2">Bla, bla, bla, <a href="...">ir a otro sitio</a></div>

Y el funcionamiento es el siguiente, si te situas encima del enlace 
primero se muestra el contenido de #modulo1 y además los de diseño lo 
han colocado estratégicamente para que solape un poco con el enlece de 
tal forma que puedes mover el cursor del enlace a este bloque sin que 
quede en tierra de nadie, es decir o tiene el hover el enlace o lo tiene 
el #modulo

Lo que se espera que haga es que inicialmente tanto #modulo1 y #modulo2 
están ocultos, pero si pasas el cursor sobre los enlaces hacen que se 
muestre el módulo, que a su vez contiene otros enlaces con lo que 
mientras esta el cursor sobre ellos también están visibles.

Es decir #modulo1 está visible si el cursor está sobre el primer enlace 
o sobre el mismo, y de forma análoga ocurre con #modulo2

El marcado html aunque no me emocione me viene dado y no lo puedo 
cambiar alegremente ya que el css está cerrado.

Pues esta tontería que creía que iba a ser una elegante sentencia jquery 
me ha quedado como una fea repetición del mismo código donde tampoco 
tengo claro que funcione en todos los casos.

                $("#piemediosmenu li a:eq(0)").hover(
                        function() { $("#modulo1").show(); },
                        function() { $("#modulo1").hide(); } );
                $("#modulo1").hover(
                        function() { this.show()},
                        function() { this.hide()} );
                $("#piemediosmenu li a:eq(1)").hover(
                        function() { $("#modulo2").show(); },
                        function() { $("#modulo2").hide(); } );
                $("#modulo2").hover(
                        function() { this.show()},
                        function() { this.hide()} );

Y digo que no me queda claro lo del funcionamiento porque si cuando 
mueves el cursor del enlace al módulo al salir del enlace se ocultase no 
llegaría a dispararse el hover de #modulo, aunque parece que esto no es así.

¿Se os ocurre algo más presentable?

-- 
Saludos -=stripTM=-



Más información sobre la lista de distribución jquery-es