jQuery Toggle State

Question

Aquí está lo rápido y delgado de mi problema:

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

Dentro de la función A se muestra un formulario. Si el usuario completa correctamente el formulario, el formulario se oculta nuevamente (regresando a su estado original).

Dentro de la función B se oculta la misma forma.

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 esta: actualmente, si el usuario completa el formulario correctamente, y se esconde, el usuario tendrá que hacer clic en el enlace dos veces antes de volver al estado de alternancia que muestra el formulario.

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

Answer 1

jQuery tiene dos métodos .toggle () :

.toggle ()

  

Alterna cada uno de los conjuntos de emparejados   elementos. Si se muestran, alternar   Los hace escondidos. Si están ocultos,   toggle los muestra.

.toggle (incluso, impar)

  

Alternar entre dos llamadas de función con cada otro clic.

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

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

Answer 2

Puedes verificar el estado del conmutador en jQuery usando .is (": hidden ") . Así que en código básico lo que utilicé:

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

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

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

Estaba usando la última definición de toggle (par, impar); , pero olvidé incluir en mi descripción original del problema que mi segunda función de alternancia no solo ocultaba el formulario, pero destruyéndolo también.

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

function B : Destruye la división.

Ambos me recordaron que toggle (); solo trata con la propiedad CSS, y como tal no está bien adaptado para esta tarea. Pero luego me di cuenta de que estaba recargando innecesariamente el formulario en cada " impd " Estado al destruirlo cuando terminé, por lo que finalmente volví 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();
    }
});

... que hace lo que yo quiero que haga. Gracias por dejarme en claro acerca de toggle (); !

Answer 5

Fui 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 cites, soy un noob

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

Answer 6

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

Reemplazar oculto por visible