javascript - 如何使用 Scriptaculous 的 Effect.Morph 关闭类(class)？

Question

Scriptaculous 的 Effect.Morph 可以获取 CSS 类并在一段时间内应用它。我有一个 div，单击按钮时会展开，因此它使用 Effect.Morph 来应用 .expanded 类。

现在我想在第二次单击时删除 .expanded 类，再次关闭 div。我如何调用 Effect.Morph 来做到这一点？

Answer 1

文档中提到了 Effect.Morph :

This effect changes the CSS properties of an element.

因此，您需要再次调用它，指定初始 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>

或者，您可以使用 Prototype remove the class altogether :

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

Scriptaculous 取决于 Prototype.js ，如果您不知道的话，那么第二个选项是可行的。

最后，您可以set the style什么都没有(我认为):

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