Question

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

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

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

在function B内隐藏相同的表单。

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

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

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

Answer 1

您可以使用.is(":hidden")检查jQuery中切换的状态。所以在我使用的基本代码中：

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

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

我正在使用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 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
}

将隐藏替换为可见

jQuery Toggle State

6 个答案: