So ändern Sie jQuery toggle() status

Question

Mit toogle zum Anzeigen/Verbergen der div, habe ich ein Problem, dass, wenn ich meine div mit einer anderen Funktion ausblenden, muss ich zweimal auf die Schaltfläche klicken, um die korrekte Aktion auszuführen.

Gibt es irgendeine Möglichkeit, den Kippschalter zu ändern, als ob ich auf den Knopf geklickt hätte?

$('#add_task').toggle(function() { 
    if ($("#new_task_status").attr("value")==0) { 
     $("#new_task").slideDown(); 
     $("#new_task_status").attr("value", "1"); 
    } 
}, function() { 
    if ($("#new_task_status").attr("value")==1) { 
     $("#new_task").slideUp(); 
     $("#new_task_status").attr("value", "0"); 
    } 
}); 


$('nav').click(function() { 
    if ($("#new_task_status").attr("value")==1) { 
     $("#new_task_status").attr("value", "0"); 
     $("#new_task").slideUp(); 
    } 
}); 

Answer 1

Sie könnten Ihre ändern .toggle() so spielt es keine Rolle, wie folgt aus:

$('#add_task').click(function() { 
    $("#new_task").slideToggle(function() { 
    $("#new_task_status").val($(this).is(':visible') ? 1 : 0); 
    }); 
}); 

Dies macht eine slideToggle() statt, so dass der aktuelle Zustand spielt keine Rolle ... wenn es fertig Schiebe Wenn es angezeigt wird (Sie haben es geöffnet), erhalten Sie eine 1 in der Eingabe, andernfalls erhalten Sie eine 0. Verwenden Sie auch .val() für die Eingabeeinstellung, viel einfacher und universeller (ich gehe davon aus, dass es hier eine Eingabe ist, da das höchstwahrscheinlich ist).

Answer 2

Nein, Sie müssten eine eigene Alternative zur Funktion toggle() implementieren, die den aktuellen Status des Elements überprüft.

Answer 3

Ich sehe keine Notwendigkeit, toogle überhaupt zu verwenden. Sie können mit nur einem Klick-Handler das Gleiche tun:

$('#add_task').click(function() { 
    if ($("#new_task_status").attr("value")==0) { 
     $("#new_task").slideDown(); 
     $("#new_task_status").attr("value", "1"); 
    } else { 
     $("#new_task").slideUp(); 
     $("#new_task_status").attr("value", "0"); 
    } 
}); 

und dann:

$('nav').click(function() { 
    $('#add_task').click(); 
}); 

Btw. nav ist kein HTML-Element. Du meinst wahrscheinlich #nav (vielleicht nur ein Tippfehler).

Und wie Nick bereits erwähnt, verwenden Sie .val().

Answer 4

Ich schlage vor, eine ereignisgesteuerte approch, wie:

$("#add_task").bind({ 
    "toggle": function(e) { 
    $("#add_task").trigger(($("#new_task_status").attr("value")==0) ? "open" : "close");); 
}, 
"open": function(e) { 
    $("#new_task_status").attr("value", "1"); 
    $("#new_task").slideDown(); 
}, 
"close": function(e) { 
    $("#new_task_status").attr("value", "0"); 
    $("#new_task").slideUp(); 
}    
}); 

$("#nav").click(function() { 
    $("#add_task").trigger("toggle"); 
});