[SOLUCIONADO] Consulta sencilla

[lepe]

Hola buenas

Tengo un menu dropdown en el que aparece una cuadro para logearse. Al hacer hover sobre el boton se abre el dropdwon inferior (box), hasta ahí ok, el problema es que cuando aparto el cursor del boton y dropdown inferior no desaparece el dropdown (box), necesito hacer click para que desaparezca y me gustaría que desapareciese al apartar el cursor.

Actualmente está la funcion "Active" y me gustaría cambiarla por la función "Hover"
No tengo ningún conocimiento de JS, intenté modificar la función "active" por "hover" pero solo se conseguian cambios en el "button" y no en el "box"
El código en cuestión es este:

Código:

$(document).ready(function() {
$(function() {
    var button = $('#loginButton');
    var box = $('#loginBox');
    var form = $('#loginForm');
    button.removeAttr('href');
	
	button.mouseover(function(){
		box.show();
		if(!button.hasClass('active'))
			button.toggleClass('active');
	});
	
    button.mouseup(function(login) {
        box.toggle();
        button.toggleClass('active');
    });
    form.mouseup(function() { 
        return false;
    });
    $(this).mouseup(function(login) {
        if(!($(login.target).parent('#loginButton').length > 0)) {
            button.removeClass('active');
            box.hide();
        }
    });
});

	$("#signin").validate();
});

Saludos y gracias

[Alexis88]

Utiliza el método .mouseout().

[lepe]

Graciasss Alexis88

Cambié lo siguiente y funciona a las mil maravillas:
"form.mouseout(function()" por: "form.mouseout(function()"

y "$(this).mouseup(function(login)" por "$(this).mouseout(function(login)"

Te doy puntos por tu gran aporte

[lepe]

Hola de nuevo

una nueva consulta, funciona perfecto el que desaparezca el boton con la funcion $(this).mouseout(function(login)

Ahora el problema es que cuando estoy logeado aparecen unos enlaces diferentes en el box y cuando muevo el cursor para clickar en uno de ellos desaparece el box sin dejarme cerrar la cuenta

¿Alguna sugerencia a añadir o modificar sobre el siguiente codigo?

Código:

$(document).ready(function() {
$(function() {
    var button = $('#loginButton');
    var box = $('#loginBox');
    var form = $('#loginForm');
    button.removeAttr('href');
	
	button.mouseover(function(){
		box.show();
		if(!button.hasClass('active'))
			button.toggleClass('active');
	});
	
    button.mouseup(function(login) {
        box.toggle();
        button.toggleClass('active');
    });
    form.mouseout(function() { 
        return false;
    });
    $(this).mouseout(function(login) {
        if(!($(login.target).parent('#loginButton').length > 0)) {
            button.removeClass('active');
            box.hide();
        }
    });
});

	$("#signin").validate();
});

Saludos

[Alexis88]

¿Podrías mostrarnos la estructura (el HTML) de esa sección?

[lepe]

Aquí lo muestro en dos partes:

Parte 1 estando logeado (quizas sea el elemento "ul" que genera un width a los links, no los considerá metidos dentro del box y al intentar clickarlos desaparece el box):

Código:

<div class="topmyaccount">
	<div id="loginContainer">
	{if $logged}
		<a href="{$link->getPageLink('my-account', true)|escape:'html'}" id="loginButton"><span class="comp"></span><span>My account</span></a>
		<div style="clear:both"></div>
		<div id="loginBox">
			<div id="myaccountcontent">  
			   <ul id="signin">
				 <li><a href="{$link->getPageLink('history.php', true)}" class="logg" title="My orders">My orders</a></li>
				 <li><a href="{$link->getPageLink('address.php', true)}" class="logg" title="My addresses">My addresses</a></li>

etc, continuan más <li>...

Parte 2 sin estar logeado (es la parte que funciona el box hover con el moseout):

Código:

{else}
		<a href="{$link->getPageLink('my-account', true)|escape:'html'}" id="loginButton"><span class="comp"></span><span>My Account</span></a>
		<div style="clear:both"></div>
		<div id="loginBox">
			<div id="loginForm">		
				<form action="{$link->getPageLink('authentication.php', true)}" id="signin" method="post">
					<h3>Already register?</h3> 
etc...

El codigo del JS del moseout lo mostré al completo anteriormente
Saludos