jQuery Toggle State

Question

这是我的问题的快速和紧张：

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

在函数内显示一个表单。如果用户成功完成表单，表单将再次隐藏（返回其原始状态）。

在函数B 内隐藏相同的表单。

这背后的理论是用户可以选择显示表单并填写表单，或者他们可以再次单击并让表单重新隐藏。

现在我的问题是：目前，如果用户成功填写表单 - 并且进入隐藏状态 - 用户必须点击链接 两次 返回显示表单的切换状态之前。

无论如何以编程方式将切换开关重置为初始状态？

Answer 1

jQuery有两个 .toggle（）方法：

.toggle（）

  

切换每组匹配的   元素。如果显示，则切换   让他们隐藏起来。如果它们被隐藏了   切换使它们显示出来。

.toggle（even，odd）

  

每隔一次点击两次函数调用之间切换。

在这种情况下，你想要第一个。这样的事情可以解决问题：

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

Answer 2

您可以使用 .is（＆quot;：hidden＆quot;）检查jQuery中切换的状态。所以在我使用的基本代码中：

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

啊，这是生活中的简单事情......

我正在使用后者的切换（偶数，奇数）; 的定义，但我忘了在我原来的问题描述中包含我的第二个切换功能不仅隐藏了表单，但也要摧毁它。

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 5

使用这个来避免额外的隐藏/显示类。 我认为这比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
}

将隐藏替换为可见