Question

当我使用slideDown时，我的框刚刚出现并且在我第一次点击链接时没有slideDown，但是每次后续点击都会按预期工作：

Answer 1

box.removeClass("hide");必须在slideDown完整演示之后：http://jsfiddle.net/3Gc6Q/9/：

$(".link").click(function(e) {

    e.preventDefault();
    var box = $("#test");

    if (box.hasClass("hide")) {

        box.slideDown(function(){box.removeClass("hide");});
    }
    else {
        box.slideUp(function() {

            box.addClass("hide");

        });

    }


});

Answer 2

尝试使用slideToggle()

$(".link").click(function(e) {

    e.preventDefault();
    var box = $("#test");

    box.slideToggle('slow');
});

这将大大简化你所拥有的东西。它还允许您删除“test”div上的一些不必要的CSS。

以下是一个工作示例：http://jsfiddle.net/zYAcB/1/

Answer 3

只需删除

box.removeClass("hide");

对slideDown的调用将使div可见。目前，当您删除“隐藏”类时，它将显示（因为它正被该类的css隐藏）并且slideDown调用则不执行任何操作。如果您不删除该类，它将按您的要求显示。

或者，您可以在动画完成时删除该类：

box.slideDown(function() {
  box.removeClass("hide");
});

Answer 4

修正：http://jsfiddle.net/3Gc6Q/8/

首次单击时，JQuery slideDown不起作用

4 个答案: