jQuery Toggle State

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

  $（“a”）。toggle（function（）{/ * function A * /}，function（）{/ * function B * /}）; 

内部function A显示一个表格。 如果用户成功完成表单，则表单将再次隐藏（返回其原始状态）。

在function B内部隐藏了相同的forms。

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

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

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

Answer 1

jQuery有两个.toggle()方法：

.toggle()

切换每组匹配的元素。 如果显示它们，则切换会隐藏它们。 如果它们被隐藏，则切换会显示它们。

.toggle(even, odd)

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

在这种情况下，你想要第一个。 像这样的东西应该做的伎俩：

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

Answer 2

您可以使用.is(":hidden")检查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

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

我正在使用后一种toggle(even,odd);定义toggle(even,odd); ，但我忘记在我对问题的原始描述中加入我的第二个切换function不仅隐藏了表格，而且还摧毁了它。

function A ：Ajax将表单加载到附加的div中。 在成功的表单post上隐藏和销毁div。

function B ：销毁div。

你们两个都提醒我toggle(); 只处理CSS属性，因此它不适合这项任务。 但后来我意识到，当我完成时，我通过销毁每个“奇怪”状态不必要地重新加载表单，所以我最终回到了这个：

  $（“link”）。click（function（）{
     if（$（this）.siblings（“。form-div”）。length == 0）{
         //表单未加载; 加载并显示表单; 完成时隐藏
     }
    其他{
         $（本）.siblings（ “形格”）切换（）;
     }
 }）; 

……做我想做的事。 谢谢你让我直接toggle(); ！

Answer 5

用这个来避免额外的隐藏/显示类。 我认为这比foxy的解决方案更灵活，因为你可以在其中添加更多function，但不要引用我，因为我是一个菜鸟

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

用隐藏替换隐藏