今天甲方提出一个需求,要求左侧的导航栏能看出来他是个能点击的状态。好,那就加一个向右的箭头吧。
But,甲方还需要这个箭头是能根据下拉与不下拉的状态,能够变化。直接给箭头增加一个css样式:
transform:rotate(90deg);//旋转角度
transition:transform 0.2s ;//旋转动画时间
好了,现在的箭头已经有个这个样式。完事儿了嘛?
of course not!
这个样式写完后发现,箭头90°向下旋转了,可是,不展开得时候怎么回去那?
jQuery中有一个toggleClass(),用来判断元素是否拥有此类名。没有则添加,有则删除。
所以,我又写了一个样式,很简单。
transform:rotate(0deg);//箭头不转角度,也就是初始得图片状态
在引用第一个样式得后面,在加上.toggleClass("XXX")。
$(this).find(".XXX").toggleClass("XXX")
这样,就可以实现箭头得动态变化了。