switch - toggle jquery

jQuery Toggle State

Question

Aquí está el rápido y flaco de mi problema:

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

Dentro de la 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 la 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: actualmente, si el usuario rellena el formulario correctamente y se oculta, el usuario debería hacer clic dos veces en el enlace antes de volver al estado de alternar que muestra el formulario.

¿Hay alguna forma de restablecer programáticamente el conmutador de palanca a su estado inicial?

Answer 1

Esto es lo que utilicé:

$(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 2

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

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

function A : Ajax carga la forma 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 trata con la propiedad CSS y, como tal, no es adecuada para esta tarea. Pero luego me di cuenta de que innecesariamente volvía a cargar la forma en cada estado "extraño" al destruirlo cuando terminé, así que finalmente volví a lo siguiente:

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

... que hace lo que yo quiero que haga. Gracias por ponerme al tanto de toggle(); !

Answer 3

JQuery tiene dos métodos toggle ():

palanca()

Alterna cada uno de los elementos combinados. Si se muestran, alternar los oculta. Si están ocultos, alternar los hace mostrar.

alternar (incluso, impar)

Alternar entre dos llamadas de función cada dos clics.

En este caso, quieres el primero. Algo como esto debería hacer el truco:

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

Answer 4

Fuimos con este para evitar la clase adicional de ocultar / mostrar. Creo que esto es más flexible que la solución de foxy ya que puedes agregar más funciones pero no me digas que soy un novato

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

Answer 5

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

Reemplazar oculto con visible

Answer 6

Puede verificar el estado de alternar en jQuery usando .is(":hidden") . Entonces, en el código básico, lo que utilicé:

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