我试图获得与 fx.morph 演示类似的结果,但点击而不是“mouseenter”或“mouseleave”。如果单击列表选项,它应该会变形。如果单击另一个项目,它应该变形,而原始变形到它的默认状态。第一部分很简单,但到目前为止,我还无法让第二部分按预期工作。我尝试创建一个“clickOutside”事件,但这仅在您单击不是列表项的某个位置时才有效。新物品会变形,但旧物品不会恢复到原来的状态。
到目前为止我在哪里:
Element.Events.outerClick = {
base : 'click',
condition : function(event){
event.stopPropagation();
return false;
},
onAdd : function(fn){
this.getDocument().addEvent('click', fn);
},
onRemove : function(fn){
this.getDocument().removeEvent('click', fn);
}
};
window.addEvent('domready', function() {
$$('#idList LI').each(function(el) {
el.set('morph', {
duration: 200
}).addEvents({
click: el.morph.pass('.hover', el),
outerClick: el.morph.pass('.default', el)
});
});
});
如果你想摆弄:http: //jsfiddle.net/JXTMa/
为了说明原始概念,我将其恢复为原始 mouseenter 示例。