javascript - 反转 onclick 函数

Question

所以这是非常基本的东西，但我对javascript很糟糕。

我正在处理以下页面： http: //mockingbirdagency.com/thebox/bettercss/login-1.html

具有以下功能。

<script type="text/javascript">                                         
$(document).ready(function() {
    $('#button-sign-up').click(function() {
        $(this).css("margin-top","10px");
        $('#details').toggle(500);
        $('#container-bloc-center').css("height", "290px")
    });
});
</script>   

当我再次点击按钮时，我希望它回到原来的位置，我该怎么做？！

Answer 1

如果我们不知道 CSS 的原始状态，我们无法轻易地告诉您如何反转对 CSS 的更改。

如果您在 CSS 中为两个元素的 margin-top 和 height 设置默认值：

#button-sign-up { margin-top:0px; }
#container-bloc-center { height:25px; }

并且还给他们一个替代课程：

#button-sign-up.active { margin-top:10px; }
#container-bloc-center.active { height:290px; }

然后在您的脚本中，您可以切换active类：

$(document).ready(function() {
    $('#button-sign-up').click(function() {
        $(this).toggleClass("active");
        $('#details').toggle(500);
        $('#container-bloc-center').toggleClass("active");
    });
});