JQuery - restablecer el estado de alternar

Question

Tengo un botón que cuando se activa/oculta un div ('.reportOptions'), esto funciona perfectamente bien.

$('.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 
    } 
); 

la misma div También se puede ocultar haciendo clic de distancia de él, haciendo lo siguiente

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

el problema que tengo con la última función es que si se realiza debo hacer doble clic en los resuestOptions para mostrar el div nuevamente.

Lo que quiero saber es si hay alguna forma de restablecer el estado de alternar sin tener que cambiar la función de alternar.

Answer 1

Tome un vistazo a la documentación para el método de palanca de jQuery: http://api.jquery.com/toggle/

También es posible que desee tomar un momento para leer a través de él aún más, ya que hay show() y hide() métodos. No debe usar css ('display', 'none') para mostrar y ocultar elementos ya que los métodos show y hide manejarán todo eso por usted y es mucho menos confuso cuando lee su código.

Creo que es posible que haya superado esta situación un poco. Tal vez puedas probar:

$('.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(); 
}); 

Básicamente usted es vinculante la función de clic con el botón que muestra el div y oculta el botón y la función de clic al documento que oculta el div y muestra el botón. Los clics en el botón y la propagación de detención de div (que es lo que faltaba en el botón anterior) para que el manejador de clic de documento no se active cuando se hace clic en esos elementos.

Answer 2

En lugar de cambiar el CSS directamente, agregue un nombre de clase (y defínalo en su CSS). Luego, simplemente elimine el nombre de la clase para volver a la normalidad.