Jquery 转换在第二次运行时不工作

这里我有这个代码，我设法得到我想要的，但它的工作只有第一次运行idk y可能如果你能帮我。。。。。 演示：

Html:

jQuery：

$(function () {
    $("#login").click(function () {
        var visi = $(".User-Login").css('visibility');
        if (visi == "visible") {
            $(".User-Login").toggleClass("box-colap");

            setTimeout(function () {
                $(".User-Login").css('visibility', 'hidden');
            }, 2000);
        } else {
            $(".User-Login").css('visibility', 'visible');
            $(".User-Login").toggleClass("box-change");
        }
    });
});

---

试着用这个代替

$(document).ready(function () {
    $('#login').click(function () {
        if($('.User-Login').is(':hidden') {
             $('.User-Login').slideDown();
        } else {
             $('.User-Login').slideUp();
        }
    });
});

---

单击登录链接时，它将检查登录框是否隐藏，如果隐藏，则向下滑动，否则向上滑动

是否删除jQuery？然后删除可见性：从css中隐藏？现在可以工作了，但我想先隐藏表单，单击时我想显示它…@user2824642，然后在单击事件之前添加以下内容$（'.User login'）.hide（）；当DOM加载时，它将隐藏它

$(function () {
    $("#login").click(function () {
        var visi = $(".User-Login").css('visibility');
        if (visi == "visible") {
            $(".User-Login").toggleClass("box-colap");

            setTimeout(function () {
                $(".User-Login").css('visibility', 'hidden');
            }, 2000);
        } else {
            $(".User-Login").css('visibility', 'visible');
            $(".User-Login").toggleClass("box-change");
        }
    });
});

$(document).ready(function () {
    $('#login').click(function () {
        if($('.User-Login').is(':hidden') {
             $('.User-Login').slideDown();
        } else {
             $('.User-Login').slideUp();
        }
    });
});