4

背景：

我遇到了一个我觉得有点意外的问题。我有一个小的 jQuery 模块，我一直在用.slideToggle()它来显示/隐藏一个元素，它一直运行良好。今天我正在为我的插件实现两个公共方法，以显示或隐藏具有滑动效果的元素。

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

作为旁注，调用.show()和.hide()工作也很好，但没有所需的动画偏离路线。

我一直认为它实现了与“幕后”.slideToggle()相同的功能，但显然事实并非如此。.slideUp().slideDown()

我的问题：

与其他人相比，在使用其中一种方式时，有什么.slideToggle()不同，.slideUp()我.slideDown()必须考虑什么？

更新，例如：

我已经能够将它分解为在这个小提琴中重现这个错误所需的最关键的组件。您可以注释掉.slideToggle("slow")并.slideUp("slow")分别对其进行测试。使用 slideToggle 它可以工作，而使用 slideUp 它不能。

4

2 回答 2

4

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

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

描述：通过滑动隐藏匹配的元素。

于 2012-12-04T14:30:35.987 回答
1

它实际上以相同的方式工作。slideDown我相信您已经颠倒了调用和的顺序slideUp。这是一个更新的小提琴。

代码：

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()显示它，反之亦然。

于 2012-12-04T14:32:38.693 回答