jquery - 最初にクリックしたときにJQueryのslideDownが機能しない

Question

slideDown を使用すると、最初にリンクをクリックしたときにボックスが表示され、slideDown しませんが、その後のすべてのクリックでは、意図したとおりに機能します。

http://jsfiddle.net/3Gc6Q/

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');
});​

これにより、そこにあるものが大幅に簡素化されます。また、「テスト」で取得した不要な CSS の一部を削除することもできますdiv。

これが実際の例です：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/