jQuery Toggle State

Question

Вот быстрый и худой из моей проблемы:

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

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

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

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

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

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

Answer 1

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

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

Answer 2

jQuery имеет два .toggle() метода:

.toggle()

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

.toggle(even, odd)

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

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

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

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

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

$("#clickie").click(function(){
  if ( $("#mydiv").css("display") == "none" ){
     $("#mydiv").show();
       } else {
        $("#mydiv").hide();
}

Answer 5

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

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

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

function 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 6

$("#div_clicked").click(function() {
  if ($("#toggle_div").is(":visible")) {
     // do this
  } else {
     // do that
}

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