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的更改。

如果你设置了两个元素的margin-top和height的默认值，那么在你的CSS中：

#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");
    });
});

反转onclick功能

1 个答案: