JQuery Toggle State

Вот быстрый и тощий мой вопрос:

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

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

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

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

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

В любом случае программно reset переключить тумблер в исходное состояние?

Ответ 1

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

.toggle()

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

.toggle(even, odd)

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

В этом случае вы хотите первый. Что-то вроде этого должно сделать трюк:

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

Ответ 2

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

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

Ответ 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');
        }
    });  
});

Ответ 4

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

Я использовал последнее определение 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();!

Ответ 5

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

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

Ответ 6

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

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