导航栏下拉动画实现

今天甲方提出一个需求，要求左侧的导航栏能看出来他是个能点击的状态。好，那就加一个向右的箭头吧。

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

这样，就可以实现箭头得动态变化了。