[jQuery] Menu dropdown con focus di apertura. Ma errori in chiusura.

[wartpro]

Ciao raga,

avrei un problemino. Ho lo script che segue che si occupa semplicemente di:

- Al click sull'elemento, far comparire il piccolo box per inserire i dati per il login
- All'apertura del piccolo box, imposta il focus sul campo username
- Se il focus viene via dal campo username, il box si chiude
- Al click successivo sull'elemento che lo apre, chiude il box...MA...qui risiede il problema..

..infatti al secondo click (quello di chiusura), il box viene chiuso, riaperto, lampeggia (chiuso/aperto ancora) due volte, e poi...chiuso definitivamente. Insomma, non va bene.

<script type="text/javascript">
$('#login-selector').click(function() {
  $('.login-container').toggle('fade') && $('#user-input').focus();
});
</script>

Se provo ad annidare le funzioni tipo .focusout() e simili non ottengo il risultato ottenuto perchè vanno in conflitto con la funzione .click()

Per semplificare il discorso, dato che comunque la logica è la stessa di un menu dropdown con click...vorrei ottenere lo stesso risultato dei menu di Twitter e/o Facebook.

Ovvero:

- Click sul trigger che apre il menu
- Se click altrove, il menu automaticamente si chiude


...mi sono dilungato troppo. Lo sò.

Grazie mille,
Wart

[wartpro]

Piccola ed unica up.

[Vindav]

probabilmente è il focus che rompe le balle
prova cosi:

$('#login-selector').click(function() {
   $('.login-container').toggle('fade',function(){
      if($('.login-container').css("display") != 'none') $('#user-input').focus();
   });
});

[wartpro]

Ciao Vin, grazie per la risposta all'up.

Così va bene anche però quando tolgo il focus o clicco su una qualsiasi parte dello schermo il menu non va via. Il menu allo stato attuale se ne va solamente se clicchi sull'elemento che lo apre/chiude (appunto).

Se sei iscritto su Facebook e/o Twitter capisci cosa voglio ottenere cliccando sui menu in alto a destra delle pagine:

- Al click si aprono
- Al click da qualche altra pagina si chiudono
*** EDIT: - Al click in un altro punto qualsiasi della pagina, si chiudono.

Questo è l'effetto che non riesco ad ottenere. Però vorrei capire come si fa!
-------------------

Per il momento comunque l'ho girata su dialog() che mi centra di suo la..dialog

..ANCHE SE..non capisco perchè la dialog all'apertura produce un "allungamento di pagina" in altezza........ma questo è roba da altro thread.

[Vindav]

$('#login-selector').click(function() {
   $('.login-container').toggle('fade',function(){
      if($('.login-container').css("display") != 'none') $('#user-input').focus();
   });
});

$("#user-input").focusout(function(){
   $('.login-container').toggle('fade');
});

[wartpro]

......ed io che lo inserivo all'interno (l'ultima parte di codice)


Grazie mille!