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用于remove the class altogether：

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

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

最后，你可以set the style一无所获（我认为）：

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

如何使用Scriptaculous Effects.Morph关闭课程？

1 个答案: