jQuery Toggle State

Question

Вот быстрый и тонкий вопрос моей проблемы:

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

Внутри function A отображается форма. Если пользователь успешно заполняет форму, форма снова скрывается (возвращается в исходное состояние).

Внутри функции B та же самая форма скрыта.

Теория, лежащая в основе этого, заключается в том, что пользователь может выбрать отображение формы и заполнить ее, или он может щелкнуть снова и вернуть форму обратно в скрытие.

Теперь мой вопрос заключается в следующем: в настоящее время, если пользователь успешно заполняет форму - и она скрывается, - пользователю придется щелкнуть ссылку дважды перед возвратом в состояние переключения, в котором отображается форма.

Есть ли способ программно переустановить тумблер в исходное состояние?

Answer 1

В jQuery есть два метода .toggle () :

.toggle ()

  

Переключает каждый из набора совпадающих   элементы. Если они показаны, переключите   делает их скрытыми Если они скрыты,   Переключатель делает их показанными.

.toggle (четный, нечетный)

  

Переключение между двумя вызовами функций при каждом нажатии.

В этом случае вам нужен первый. Нечто подобное должно сработать:

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

Answer 2

Вы можете проверить состояние переключателя в jQuery, используя .is (" скрытый ") . Итак, в основном коде, что я использовал:

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

Answer 3

Вот что я использовал:

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

Ааа, это простые вещи в жизни ...

Я использовал последнее определение toggle (четное, нечетное); , но я забыл включить в свое первоначальное описание проблемы, что моя вторая функция переключения не только скрывала форму, но разрушая и его.

function A : Ajax загружает форму в добавленный div. Скрыть и уничтожить div в успешной форме сообщения.

функция B : уничтожить div.

Вы оба напомнили мне, что toggle (); имеет дело только со свойством CSS, и поэтому оно не подходит для этой задачи. Но потом я понял, что я без необходимости перезагружаю форму на каждом "нечетном" состояние, уничтожив его, когда я был сделан, поэтому я в конечном итоге вернулся к этому:

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

... что делает то, что я хочу. Спасибо, что объяснили мне toggle (); !

Answer 5

Пошел с этим, чтобы избежать дополнительного класса Hide / Show. Я думаю, что это более гибко, чем решение foxy, так как вы можете добавить больше функций, но не говорите мне, что я нуб

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

Заменить скрытое на видимое