5

Hey ragazzi Speravo che mi potrebbe aiutare ...CHIUDI jQuery UI quando si fa clic in qualsiasi altro luogo

im un po 'di un novizio con jQuery e javascript. cercando di implementare un menu jquery-ui che appare quando si fa clic su un oggetto ma scompare quando viene fatto un clic in un punto diverso dal menu stesso.

Questo è il codice che ho finora

$("div.item").click(function(e){ 
     $("#menu").menu(); 
     $("#menu").css("top",e.pageY); 
     $("#menu").css("left",e.pageX); 

     }); 

ora voglio nascondere e distruggere il menu se un clic è fatto altrove che sulle itself..thanks menu in anticipo.

risposta

8

Si desidera utilizzare l'evento sfocatura, che si attiva quando un oggetto perde lo stato attivo. Cliccando su qualcos'altro, l'attenzione sarà portata via.

$("#menu").blur(function() { 
    // Your code here to either hide the menu (.toggle()) 
    // or remove it completely (.remove()). 
}); 
+0

cant get a lavorare, per qualche ragione evento viene richiamato solo quando si fa clic su un elemento nella "#menu" la prima volta e fare clic su un altro punto della schermata. –

+4

in realtà ha funzionato .. Ho dovuto solo fare $ ("# menu"). Focus(); quando è stato cliccato perché quando il div è stato cliccato e il menu mostra, l'attenzione non era sul menu .. grazie per la spiegazione visto che mi ha aiutato a capirlo :) –

1

Solo per serbatoi per codice di cui sopra e commentare (@ morte relic0, @ levi-Botelho)

// create 
$('#menu').blur(function() { 
    $('#menu').hide(); 
}); 

// show 
$('#menu').show().focus(); 
0

ho avuto lo stesso problema con il widget JQuery UI Selezionare Menu e il problema si è verificato perché io non ha importato il file css del menu di selezione UI JQuery. Ho scelto di non farlo perché volevo modellare il menu di selezione da solo.

Per risolvere il problema ho aggiunto [aria-hidden="true"] { display: none; } al mio css, ho notato che questa proprietà è stata un'aria alterna tra true e false quando ho suonare in giro cercando di risolvere il problema.

0

ciao questo è il processo che seguiamo in Oodles Technologies per nascondere jquery datepicker.

La struttura di base del nostro modal sarà simile a questa.

<button class="btn btn-info btn-lg" data-target="#myModal" data-toggle="modal" type="button">Open Modal</button> 

E questo è il nostro css di base e questo è per l'altezza modale definita.

.modal-body { 
    min-height: 500px; 
    max-height: 500px; 
    overflow: auto; 
} 

$(".modal-body").scroll(function(){ 
    $("#ui-datepicker-div").hide(); 
}); 

speriamo vi sia utile

Problemi correlati