切换事件在 1.8 版中已弃用,并在 1.9 版中删除
试试这个...
$('#myelement').toggle(
function () {
$('#another-element').show("slide", {
direction: "right"
}, 1000);
},
function () {
$('#another-element').hide("slide", {
direction: "right"
}, 1000);
});
注意:此方法签名在 jQuery 1.8 中已弃用,并在 jQuery 1.9 中删除。jQuery 还提供了一个名为 .toggle() 的动画方法,用于切换元素的可见性。是否触发动画或事件方法取决于传递的参数集,jQuery 文档。
提供 .toggle() 方法是为了方便。手动实现相同的行为相对简单,如果 .toggle() 中内置的假设证明是有限的,那么这可能是必要的。例如,如果将 .toggle() 应用于同一元素两次,则不能保证其正常工作。由于 .toggle() 在内部使用点击处理程序来完成它的工作,我们必须解除点击绑定以移除附加到 .toggle() 的行为,因此其他点击处理程序可能会陷入交火中。该实现还会在事件上调用 .preventDefault(),因此如果在元素上调用了 .toggle(),则不会跟踪链接并且不会单击按钮,jQuery 文档
您可以在使用显示的可见性和单击隐藏之间切换。如果元素可见,您可以设置可见性条件,然后隐藏否则显示它。请注意,您将需要jQuery UI才能将附加效果与 show/hide like direction 一起使用。
现场演示
$( "#myelement" ).click(function() {
if($('#another-element:visible').length)
$('#another-element').hide("slide", { direction: "right" }, 1000);
else
$('#another-element').show("slide", { direction: "right" }, 1000);
});
或者,只需使用切换而不是单击。通过使用切换,您将不需要条件 (if-else) 语句。正如 TJCrowder 所建议的那样。
现场演示
$( "#myelement" ).click(function() {
$('#another-element').toggle("slide", { direction: "right" }, 1000);
});