jQuery Toggle State

Question

Ecco la rapida e magra del mio problema:

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

All'interno della funzione A viene visualizzato un modulo. Se l'utente completa correttamente il modulo, il modulo viene nuovamente nascosto (tornando al suo stato originale).

All'interno della funzione B lo stesso modulo è nascosto.

La teoria alla base di ciò è che l'utente può scegliere di visualizzare il modulo e compilarlo, oppure può fare di nuovo clic e far tornare il modulo nascosto.

Ora la mia domanda è questa: attualmente, se l'utente compila correttamente il modulo - e si nasconde - l'utente dovrebbe fare clic sul link due volte prima di tornare allo stato di attivazione / disattivazione che visualizza il modulo.

Esiste un modo per ripristinare a livello di codice l'interruttore a levetta al suo stato iniziale?

Answer 1

jQuery ha due metodi .toggle () :

.toggle ()

  

Attiva / disattiva ciascuna serie di corrispondenti   elementi. Se sono mostrati, attiva / disattiva   li rende nascosti. Se sono nascosti,   attiva / disattiva li rende mostrati.

.toggle (pari, dispari)

  

Alterna tra due chiamate di funzione ogni altro clic.

In questo caso vuoi il primo. Qualcosa del genere dovrebbe fare il trucco:

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

Answer 2

Puoi controllare lo stato del toggle in jQuery usando .is (": nascosto ") . Quindi nel codice di base quello che ho usato:

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

Answer 3

Ecco cosa ho usato:

$(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, sono le cose semplici della vita ...

Stavo usando quest'ultima definizione di toggle (pari, dispari); , ma avevo dimenticato di includere nella mia descrizione originale del problema che la mia seconda funzione di attivazione non nascondeva solo il modulo, ma anche distruggendolo.

funzione A : Ajax carica il modulo in un div aggiunto. Nascondi e distruggi il div in un post di modulo di successo.

funzione B : distrugge il div.

Mi avete ricordato entrambi che toggle (); si occupa solo della proprietà CSS, e come tale non è adatto a questo compito. Ma poi mi sono reso conto che stavo ricaricando inutilmente il modulo su ogni "dispari" dichiararlo distruggendolo quando ho finito, quindi alla fine sono tornato a questo:

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

... che fa quello che voglio che faccia. Grazie per avermi spiegato chiaramente toggle (); !

Answer 5

Sono andato con questo per evitare l'ulteriore classe hide / show. Penso che sia più flessibile della soluzione di foxy in quanto puoi aggiungere più funzioni all'interno ma non citarmi su che sono 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
}

Sostituisci nascosto con visibile