Как использовать эффект Scriptaculous .Morph отключить класс?

Question

Scriptaculous's Effect.Morph может принимать класс CSS и применять его в течение определенного периода времени. У меня есть div, который расширяется при нажатии кнопки, поэтому он использует Effect.Morph для применения класса .expanded.

Теперь я хотел бы удалить класс .expanded на второй щелчок, переключив снова div. Как я могу вызвать Effect.Morph для этого?

Answer 1

В документации сказано это о Effect.Morph:

Этот эффект изменяет свойства CSS элемента.

Таким образом, вы должны были бы назвать его снова, указав начальные свойства CSS, чтобы ваш ДИВ может вернуться в исходное состояние, например, (опять же, из документации):

<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);