Question

背景

我遇到了一个我发现有些出乎意料的问题。我有一个小的jQuery模块，我一直在使用.slideToggle()显示/隐藏一个元素，它一直工作正常。今天我正在为我的插件实现两个公共方法，以显示或隐藏具有滑动效果的元素。

听起来很简单，我虽然只是用.slideUp()和slideDown()来完成同样的事情。当我意识到在元素上调用这些方法时没有任何反应时，我真的很惊讶。

作为旁注，调用.show()和.hide()也可以正常工作，但是当然没有所需的动画。

我一直认为.slideToggle()实现了与.slideUp()和.slideDown()“相同的功能”，但显然它没有。

我的问题：

.slideToggle()与.slideUp()和.slideDown()的不同之处是什么？与其他人相比，我在使用时需要考虑什么？

更新，例如：

我已经能够将其分解为在this fiddle中重现此错误所需的最重要的组件。您可以分别注释掉.slideToggle("slow")和.slideUp("slow")来测试它。使用slideToggle它可以正常工作，使用slideUp它不会。

Answer 1

问题是slideUp不是该方法的最佳名称。一个更好的名字是“slideHide”。如果您将其更改为slideDown，则按预期工作，因为它对应于show。

来自http://api.jquery.com/slideUp/

描述：用滑动动作隐藏匹配的元素。

Answer 2

实际上，它的工作方式相同。我相信你已经改变了调用slideDown和slideUp的顺序。这是更新后的fiddle。

代码：

var flip = true;
$(".dockedHeader").on("click", function () {
    if (flip) {
        $(".content").slideDown("slow");
        flip = !flip;
    } else {
        $(".content").slideUp("slow");
        flip = !flip;
    }
    //$(".content").slideToggle("slow");
});

最初您的内容是隐藏的，因此您应该拨打sliderDown()而不是slideUp()来展示它，反之亦然。

当.slideUp（）和slideDown（）没有时，.slideToggle（）工作的原因可能是什么

2 个答案: