problema con menu desplegable.

cristian_cena · #1 (**permalink**) 15/02/2011, 15:14

Hola amigos, resulta que tengo un problema con jquery y un menu desplegable que estoy armando:

Este es el item de menu:

Código HTML:

Ver original<div id="institucional_arrow">
<a href="#" class="menu_usuarios_a" id="inst_text">institucional</a>
<div id="inst_arrow"></div>
</div>

este es el panel que se desplega:

Código HTML:

Ver original<div id="institucional">
<div class="desplegado_content">
    <a href="http://localhost/1JAMBA/enress/sitio/panel/usuarios/institucional/historia/index.php">historia</a>
    <a href="http://localhost/1JAMBA/enress/sitio/panel/usuarios/institucional/funciones/index.php">funciones</a>
    <a href="http://localhost/1JAMBA/enress/sitio/panel/usuarios/institucional/composicion/index.php">composición</a>
    <a href="http://localhost/1JAMBA/enress/sitio/panel/usuarios/institucional/jurisdiccion/index.php">jurisdicción</a>
    <a href="http://localhost/1JAMBA/enress/sitio/panel/usuarios/institucional/presupuesto/index.php">presupuesto</a>
    <a href="http://localhost/1JAMBA/enress/sitio/panel/usuarios/institucional/estructura/index.php">estructura</a>
    <a href="http://localhost/1JAMBA/enress/sitio/panel/usuarios/institucional/sedes/index.php">sedes</a>
    <a href="http://localhost/1JAMBA/enress/sitio/panel/usuarios/institucional/consejo_consultivo/index.php">consejo consultivo</a> 
</div>
</div>

Al hacer mouseover se desplega hacia abajo el panel

Código Javascript:

Ver original$("#institucional_arrow").mouseover(
    function(){
        $("#institucional").slideDown("fast");
    }
);

Al hacer mouseout sobre el panel se pliega hacia arriba el panel

Código Javascript:

Ver original$("#institucional").mouseout(
    function(){
        $("#institucional").slideUp("fast");
    }
);

Bien, todo funciona como debe ser. pero el problema es que al hacer mouseout sobre #institucional cuando selecciono un <a> se pliega el menu, y lo que deseo es que se pliegue cuando el mouse salga de la capa #institucional.
O sea, al entrar el mouse sobre el enlace esta saliendo de la capa #institucional, pero lo que busco es que el evento mouseout se lleve a cabo cuando el mouse salga del rectangulo que contiene los enlaces.

Desde ya agradezco su ayuda de antemano.

Un saludo

marlanga · #2 (**permalink**) 15/02/2011, 19:17

¿Algo así?

Código HTML:

<html>
	<head>
		<script src="jquery.js"></script>
	</head>
	<style>
		a { display:block; }
		#institucional_arrow { background:red; width:300px;}
		#institucional { background:green; width:300px; display:none;}
	</style>
	<script>
		$(function(){
			$("#institucional_arrow").hover(
				function(){
					$("#institucional").stop(true,true).slideDown("fast");
				},
				function(){
					$("#institucional").stop(true,true).slideUp("fast");
				}
			);
		});
	</script>
	<body>

	<div id="institucional_arrow">
		<a href="#" class="menu_usuarios_a" id="inst_text">institucional</a>
		<div id="inst_arrow">
			<div id="institucional">
				<div class="desplegado_content">
				    <a href="http://localhost/1JAMBA/enress/sitio/panel/usuarios/institucional/historia/index.php">historia</a>
				    <a href="http://localhost/1JAMBA/enress/sitio/panel/usuarios/institucional/funciones/index.php">funciones</a>
				    <a href="http://localhost/1JAMBA/enress/sitio/panel/usuarios/institucional/composicion/index.php">composición</a>
				    <a href="http://localhost/1JAMBA/enress/sitio/panel/usuarios/institucional/jurisdiccion/index.php">jurisdicción</a>
				    <a href="http://localhost/1JAMBA/enress/sitio/panel/usuarios/institucional/presupuesto/index.php">presupuesto</a>
				    <a href="http://localhost/1JAMBA/enress/sitio/panel/usuarios/institucional/estructura/index.php">estructura</a>
				    <a href="http://localhost/1JAMBA/enress/sitio/panel/usuarios/institucional/sedes/index.php">sedes</a>
				    <a href="http://localhost/1JAMBA/enress/sitio/panel/usuarios/institucional/consejo_consultivo/index.php">consejo consultivo</a> 
				</div>
			</div>
		</div>
	</div>
	</body>
</html>

cristian_cena · #3 (**permalink**) 15/02/2011, 21:02

Hola marlanga, excelente!! eso es justo lo que buscaba hacer. Mil gracias hermano, quedo a tu servicio en lo que necesites.

Voy a estudiar el método stop(); que parece ser el que hace la magia.

Un fuerte abrazo