jQuery Toggle Estado

Question

Ésta es la rápida y flaco de mi problema:

$("a").toggle(function() { /*function A*/ }, function() { /*function B*/ });

Dentro function A se muestra un formulario. Si el usuario completa con éxito el formulario, el formulario se oculta nuevamente (volviendo a su estado original).

Dentro de function B la misma forma está oculta.

La teoría detrás de esto es que el usuario puede elegir mostrar el formulario y completarlo, o puede hacer clic nuevamente y hacer que el formulario vuelva a ocultarse.

Ahora mi pregunta es la siguiente: en la actualidad, si el usuario rellena el formulario con éxito - y va a esconderse - el usuario tendría que hacer clic en el enlace dos veces antes de regresar al estado de palanca que muestra el formulario.

¿Hay alguna manera de restablecer programáticamente el interruptor de palanca a su estado inicial?

Answer 1

jQuery tiene dos .toggle() métodos:

.toggle()

Alterna cada uno del conjunto de emparejados elementos. Si se muestran, alternar los oculta. Si están ocultos, alternar hace que se muestren.

.toggle(even, odd)

Alternar entre dos llamadas de funciones a cada otro clic.

En este caso desea la primera. Algo como esto debe hacer el truco:

$("a").click(function() { 
    $("#theForm").toggle(); 
}); 

Answer 2

Ahh, son las cosas simples de la vida ...

que estaba usando la última definición de toggle(even,odd);, pero me había olvidado incluir en mi descripción original de el problema de que mi segunda función de alternar no solo estaba ocultando la forma, sino también destruyéndola.

function A: Ajax carga el formulario en un div anexado. Oculta y destruye el div en una publicación de formulario exitosa.

function B: Destruye el div.

Ambos me recordaron que toggle(); solo se ocupa de la propiedad CSS y, como tal, no es adecuada para esta tarea. Pero luego me di cuenta que estaba innecesariamente volver a la carga el formulario en cada estado "extraño" destruyéndola cuando estaba hecho, por lo que el tiempo llegué de vuelta a esto:

$("link").click(function() { 
    if ($(this).siblings(".form-div").length == 0) { 
     // form is not loaded; load and show the form; hide when done 
    } 
    else { 
     $(this).siblings(".form-div").toggle(); 
    } 
});

... el que hace lo que yo quiero para hacer. Gracias por ponerme directamente sobre toggle();!

Answer 3

Esto es lo que he usado:

$(document).ready(function() { 
    $('#listing_position').click(function() { 

    var div_form = $('#listing_position_input'); 
     if (div_form.hasClass('hide')) { 
      div_form.removeClass('hide'); 
     } else { 
      div_form.addClass('hide'); 
     } 
    }); 
}); 

Answer 4

Fui con éste para evitar la clase de ocultar/mostrar adicional. creo que esto es más flexible que la solución de Foxy como se puede añadir más funciones dentro, pero no me hagáis caso de que yo soy un novato

$("#clickie").click(function(){ 
    if ($("#mydiv").css("display") == "none"){ 
    $("#mydiv").show(); 
     } else { 
     $("#mydiv").hide(); 
} 

Answer 5

Puede comprobar el estado de la palanca de jQuery utilizando .is(":hidden") . Así que en el código básico de lo que solía:

$("#div_clicked").click(function() { 
    if ($("#toggle_div").is(":hidden")) { 
    // do this 
    } else { 
    // do that 
} 
}); # add missing closing 

Answer 6

$("#div_clicked").click(function() { 
    if ($("#toggle_div").is(":visible")) { 
    // do this 
    } else { 
    // do that 
} 

Reemplazar oculto con visibles