Comment est-ce que j'utilise Effect.Morph de Scriptaculous pour désactiver une classe?

Question

Effet de Scriptaculous.Morph peut prendre une classe CSS et l'appliquer sur une période de temps. J'ai un div qui se dilate quand un bouton est cliqué, donc il utilise Effect.Morph pour appliquer une classe .expanded.

Maintenant, je voudrais supprimer la classe .expanded sur un second clic, en basculant le div fermé à nouveau. Comment puis-je invoquer Effect.Morph pour le faire?

Answer 1

La documentation dit ceci au sujet Effect.Morph:

Cet effet modifie les propriétés CSS d'un élément.

Alors vous devez appeler à nouveau, en spécifiant les propriétés CSS initiales de sorte que votre div peut revenir à son état initial, par exemple (encore une fois, des docs):

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

Alternativement, vous pouvez utiliser Prototype à remove the class altogether:

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

Scriptaculous dépend de Prototype.js, au cas où vous ne le saviez pas, de sorte que la deuxième option est viable.

Enfin, vous pouvez set the style à rien (je pense):

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