javascript - 如何使用 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>

或者，您可以使用 Prototype完全删除该类：

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

Scriptaculous 依赖于Prototype.js，以防你不知道，所以第二个选项是可行的。

最后，您可以将样式设置为空（我认为）：

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