JQuery - reset stato di commutazione

Question

Ho un pulsante che quando commuta mostra/nasconde un div ('.reportOptions'), questo funziona perfettamente.

$('.reportOptions').click(function(e){ 
    e.stopPropagation(); 
}); 


$('.requestOptions').toggle(
    function(){ 
     $(this).parent().find('.reportOptions').css('display','block'); //show request options 
    },function(){ 
     $('.reportOptions').css('display','none'); //hide all request oprtions menus 
    } 
); 

stesso div può anche essere nascosto facendo clic lontano da esso nel modo seguente

$(document).click(function(){ 
    $('.reportOptions').css('display','none'); 
    $('.requestOptions').toggle(even); 
}); 

il problema che ho con l'ultima funzione è che se viene eseguita devo fare doppio clic sul resuestOptions pulsante per visualizzare nuovamente il div.

Quello che voglio sapere è se c'è un modo in cui è possibile ripristinare lo stato di commutazione senza dover cambiare la funzione di commutazione.

Answer 1

Date un'occhiata alla documentazione per il metodo di commutazione di jQuery: http://api.jquery.com/toggle/

Si consiglia inoltre di prendere un momento per leggere attraverso di essa più come ci sono show() e metodi hide(). Non dovresti usare css ('display', 'none') per mostrare e nascondere gli elementi come i metodi show e hide gestiranno tutto questo per te ed è molto meno confuso quando leggi il tuo codice.

Penso che potresti aver pensato troppo a questa situazione. Prova a modificare:

$('.reportOptions').click(function(e){ 
    e.stopPropagation(); 
}); 


$('.requestOptions').click(
    function(e){ 
     $(this).parent().find('.reportOptions').show(); //show request options 
     $('.requestOptions').hide(); //hide all request oprtions menus 
     e.stopPropagation(); 
    } 
); 


$(document).click(function(){ 
    $('.reportOptions').hide(); 
    $('.requestOptions').show(); 
}); 

Fondamentalmente il gioco è vincolante la funzione di clic al pulsante che mostra il div e nasconde il pulsante e la funzione di clic al documento che nasconde il div e mostra il pulsante. I clic sul pulsante e la propagazione div stop (che è ciò che mancava nel pulsante precedente) in modo che il gestore di clic del documento non attivi quando si fa clic su quegli elementi.

Answer 2

Invece di modificare direttamente il CSS, aggiungi un nome di classe (e definiscilo nel tuo CSS). Quindi rimuovi il nome della classe per tornare alla normalità.