jquery - jQuery 切换状态

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

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

我使用的是 的后一个定义toggle(even,odd);，但我忘记在我最初对问题的描述中包含我的第二个切换功能不仅隐藏了表单，而且还破坏了它。

function A：Ajax 将表单加载到附加的 div 中。隐藏并销毁成功表单帖子上的 div。

function B: 销毁 div。

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

$("链接").click(function() {
    if ($(this).siblings(".form-div").length == 0) {
        // 表单未加载；加载并显示表格；完成后隐藏
    }
    别的 {
        $(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
}

用可见替换隐藏