jQuery Toggle Staat

Question

Hier ist die schnelle und dünn meine Frage:

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

Innerhalb function A wird ein Formular angezeigt. Wenn der Benutzer das Formular erfolgreich abgeschlossen ist, wird die Form wieder ausgeblendet (Rückkehr zu seinem ursprünglichen Zustand ist).

Innerhalb function B die gleiche Form verborgen ist.

Die Theorie dahinter ist, dass der Benutzer das Formular angezeigt werden können wählen, und füllen Sie es aus, oder sie können wieder klicken und das Formular wieder in den Untergrund haben gehen.

Nun meine Frage ist: zur Zeit, wenn der Benutzer erfolgreich füllt das Formular aus - und es geht in den Untergrund - der Benutzer muss auf den Link zu klicken Sie auf zweimal , bevor Sie zum Umschalten Zustand zurückkehrt, der das Formular angezeigt wird.

Gibt es trotzdem programmatisch den Kippschalter in den Ausgangszustand zurückgesetzt werden?

Answer 1

jQuery hat zwei .toggle() Methoden:

.toggle()

  

Blendet jedes der Gruppe angepaßter   Elemente. Wenn sie gezeigt werden, Makeln   macht sie versteckt. Wenn sie versteckt,   Toggle macht sie gezeigt.

.toggle(even, odd)

  

Umschalten zwischen zwei Funktionsaufrufen alle anderen klicken.

In diesem Fall sollten Sie die ersten. So etwas sollte es tun:

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

Answer 2

Sie können prüfen, den Zustand des Toggle in jQuery von .is(":hidden") verwenden. So in grundlegenden Code, was ich verwendet:

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

Answer 3

Hier ist, was ich verwende:

$(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, es sind die einfachen Dinge im Leben ...

Ich war die letztere Definition von toggle(even,odd);, aber ich hatte in meiner ursprünglichen Beschreibung des Problems, dass meine zweite Toggle-Funktion wurde nicht nur die Form versteckt vergessen zu schließen, aber es auch zu zerstören.

function A: Ajax das Formular in einem angehängten div laden. Ausblenden und zerstören die div auf eine erfolgreiche Form Post.

function B. Zerstören Sie die div

Sie beide erinnerte mich, dass toggle(); nur mit der CSS-Eigenschaft befasst, und als solche ist sie nicht auf diese Aufgabe gut geeignet. Aber dann wurde mir klar, dass ich unnötig die Form Umladen auf jedem „odd“ Zustand, indem sie es zu zerstören, wenn ich fertig war, so kam ich schließlich zurück zu diesem:

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

... und das tut, was ich will, es zu tun. Danke, dass ich gerade über toggle(); Einstellung!

Answer 5

Wir waren mit diesem die zusätzliche hide / show Klasse zu vermeiden. Ich denke, das flexibler ist als Lösung der foxy, wie Sie in mehr Funktionen hinzufügen können, aber zitieren Sie mich nicht, dass ich ein noob bin

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

mit sichtbaren versteckt Replace