javascript - Scriptaculous の Effect.Morph を使用してクラスをオフにするにはどうすればよいですか?

Question

Scriptaculous の Effect.Morph は、CSS クラスを受け取り、それを一定期間適用することができます。ボタンをクリックすると展開する div があるので、Effect.Morph を使用して.expandedクラスを適用します。

ここで、2 回目のクリックでクラスを削除し.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に依存しているため、2 番目のオプションが有効です。

最後に、スタイルを何も設定できません (私が思うに):

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