如何改变jQuery toggle()的状态

Question

使用toggle来显示/隐藏div时，我遇到了一个问题，当我使用另一个函数隐藏我的div时，我必须点击两次按钮才能执行正确的操作。

有没有办法改变切换开关，就像我点击按钮一样？

$('#add_task').toggle(function() { 
    if ($("#new_task_status").attr("value")==0) { 
        $("#new_task").slideDown();
        $("#new_task_status").attr("value", "1");
    }
}, function() {
    if ($("#new_task_status").attr("value")==1) { 
        $("#new_task").slideUp();
        $("#new_task_status").attr("value", "0");
    }
});


$('nav').click(function() { 
    if ($("#new_task_status").attr("value")==1) { 
        $("#new_task_status").attr("value", "0");
        $("#new_task").slideUp();
    }
});

- Zier Gofren Schlanum

Answer 1

您可以更改.toggle()，使其不再重要，像这样：

$('#add_task').click(function() { 
  $("#new_task").slideToggle(function() {
    $("#new_task_status").val($(this).is(':visible') ? 1 : 0);
  });
});

这里使用slideToggle()来切换状态，因此当前状态不重要……当它完成滑动时，如果显示（也就是打开），输入框中会得到1，否则得到0。此外，对于设置输入值，请使用.val()更加简便和通用化（我假设这是一个输入框，因为那是最常见的情况）。

- Nick Craver

Answer 2

不，您必须实现自己的替代toggle()函数，来检查元素的当前状态。

- Sjoerd

Answer 3

我并不觉得有必要使用 toogle。你只需要使用单击事件处理程序即可实现相同的效果：

$('#add_task').click(function() { 
    if ($("#new_task_status").attr("value")==0) { 
        $("#new_task").slideDown();
        $("#new_task_status").attr("value", "1");
    } else  {
        $("#new_task").slideUp();
        $("#new_task_status").attr("value", "0");
    }
});

然后：

$('nav').click(function() { 
    $('#add_task').click();
});

顺便提一下，nav 不是 HTML 元素。你可能指的是 #nav（也许只是打错了）。

另外，正如 Nick 已经提到的，考虑使用 .val()。

- Felix Kling

---

顺便提一下，你的解决方案会循环上下滑动，就像在挥手 :) - Zier Gofren Schlanum

Answer 4

我建议采用事件驱动的方法，例如：

$("#add_task").bind({
    "toggle": function(e) {
    $("#add_task").trigger(($("#new_task_status").attr("value")==0) ? "open" : "close"););
},
"open": function(e) {
    $("#new_task_status").attr("value", "1");
    $("#new_task").slideDown();
},
"close": function(e) {
    $("#new_task_status").attr("value", "0");
    $("#new_task").slideUp();
}               
});

$("#nav").click(function() {
    $("#add_task").trigger("toggle");
});

- Davide Ungari

---

这与原始帖子不同，点击 #nav 始终会关闭元素，而您的解决方案会导致 i 切换它。你需要使用 .trigger("close")，但这似乎是一种非常复杂的方式，无法利用已经定义的函数...... - Nick Craver