如何使用Scriptaculous的Effect.Morph關閉課程？

Question

Scriptaculous的Effect.Morph可以接受一個CSS類並在一段時間內應用它。我有一個div，當點擊一個按鈕時會展開，所以它使用Effect.Morph來應用一個.expanded類。

現在我想在第二次點擊時刪除.expanded類，再次關閉div。我怎樣才能調用Effect.Morph來做到這一點？

Answer 1

的文件說，這大約Effect.Morph：

這種效應改變的CSS屬性的元素 。

所以，你會需要再次調用它，指定初始CSS屬性，使你的DIV可以恢復到初始狀態，例如（再次，從文檔）：

<div id="morph_demo" style="background:#cccccc; width:100px; height:100px;"></div> 
<ul> 
    <li><a href="#" onclick="$('morph_demo').morph('background:#00ff00; width:300px;'); return false;">Click me for a demo!</a></li> 
    <li><a href="#" onclick="$('morph_demo').morph('background:#cccccc; width:100px;'); return false;" >Reset the demo!</a></li> 
</ul> 

另外，你可以使用原型來remove the class altogether：

$('yourDivId').removeClassName('yourClassId'); 

Scriptaculous的取決於Prototype.js，如果你不知道的，所以第二個選項是可行的。

最後，您可以set the style不了了之（我認爲）：

$('yourDivId').setStyle(null);