Как мне использовать Scriptaculous's Effect.Morph, чтобы отключить класс?

Question

Effect.Morph Scriptaculous может взять 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);