反向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，如果您设置默认值的两个元素的边距和高度：

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