Question

使用toogle显示/隐藏div，我遇到了一个问题，当我使用anothor函数隐藏我的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();
    }
});

Answer 1

你可以改变你的.toggle()所以没关系，就像这样：

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

这会改为slideToggle()，所以当前状态无关紧要......当它完成滑动时，如果显示（你打开它），你会在输入中得到1，否则你得到0。此外，使用.val()进行输入设置，更容易，更通用（我假设这是一个输入，因为这很可能）。

Answer 2

不，您必须实现自己的toggle（）函数替代方法，该函数检查元素的当前状态。

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（也许只是一个错字）。

正如尼克已经提到的，考虑使用.val()。

Answer 4

我建议使用事件驱动的approch，例如：

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

如何更改jQuery toggle（）状态

4 个答案: