Come modificare lo stato di jQuery toggle()

Question

Utilizzando toogle per mostrare/nascondere il div, ho un problema che quando nascondo il mio div con la funzione anothor, devo fare clic due volte sul pulsante per eseguire l'azione corretta.

C'è qualche modo per cambiare l'interruttore a levetta come ho fatto clic sul pulsante?

$('#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

Si potrebbe cambiare la vostra .toggle() in modo non importa, in questo modo:

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

Questo fa un slideToggle() invece, così allo stato attuale non importa ... quando finisce scorrevole , se viene mostrato (l'hai aperto) ottieni un valore 1 nell'input, altrimenti ottieni 0. Inoltre, usa .val() per le impostazioni di input, molto più semplice e più universale (presumo che sia un input qui poiché è molto probabile).

Answer 2

No, è necessario implementare la propria alternativa alla funzione toggle(), che controlla lo stato corrente dell'elemento.

Answer 3

Non vedo alcuna necessità di utilizzare toogle affatto. Si può fare lo stesso con un semplice gestore di clic:

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

e poi:

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

Btw. nav non è un elemento HTML. Probabilmente vuoi dire #nav (forse solo un refuso).

E come già detto Nick, è consigliabile utilizzare .val().

Answer 4

suggerisco un approch event-driven, come:

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