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