Estado Alternar jQuery

Question

Aqui está o rápido e magro de meu problema:

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

Dentro function A um formulário é exibido. Se o usuário for concluído com êxito o formulário, o formulário está escondido novamente (voltando ao seu estado original).

Dentro function B a mesma forma está escondido.

A teoria por trás disso é que o usuário pode escolher para exibir o formulário e preenchê-lo, ou eles podem clicar novamente e ter a parte de trás forma se esconder.

Agora, a minha pergunta é esta: atualmente, se os preenchimentos usuário o formulário com sucesso - e vai se esconder - o usuário tem que clicar no link duas vezes antes de retornar ao estado de alternância que exibe o formulário.

Existe uma maneira de repor programaticamente o interruptor ao seu estado inicial?

Answer 1

jQuery tem dois métodos .toggle():

.toggle()

Alterna cada um dos conjunto de correspondida elementos. Se eles são mostrados, toggle torna-los escondidos. Se eles estão escondidos, alternância torna mostrado.

.toggle(even, odd)

Alternar entre duas chamadas de função qualquer outro clique.

Neste caso, você quer que o primeiro. Algo como isso deve fazer o truque:

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

Answer 2

Você pode verificar o estado da alternância no jQuery usando .is(":hidden"). Assim, no código básico que eu usei:

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

Answer 3

Aqui está o que eu usei:

$(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, é as coisas simples da vida ...

Eu estava usando a última definição de toggle(even,odd);, mas eu tinha esquecido de incluir na minha descrição original do problema que o meu segundo cargo alternar não só estava escondendo a forma, mas destruí-lo também.

function A: Ajax carregar o formulário em um div anexado. Ocultar e destruir o div em um post forma bem sucedida.

function B:. Destruir o div

Você tanto me lembrou que toggle(); só lida com a propriedade CSS, e como tal, não é bem adequada para esta tarefa. Mas então eu percebi que eu estava desnecessariamente re-carregar o formulário em cada estado "estranho" por destruí-la quando eu estava feito, então eu finalmente voltou a isto:

$("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 faz o que eu quero que ele faça. Obrigado por me definir reta sobre toggle();!

Answer 5

Fui com um presente para evitar a classe hide / show adicional. Eu acho que isso é mais flexível do que a solução de Foxy, como você pode adicionar mais funções dentro, mas não citar-me sobre o que eu sou um 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
}

Substituir escondida com visíveis