[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