后台管理系统导航栏总结

一般后台的管理界面结构如下：

顶部+左侧导航+内容区域+底部

 主要实现以下功能：

1. 顶部导航模块添加class效果，给点击的元素添加背景颜色同时改变宽度，其他元素移除样式
2. 点击顶部导航显示对应的左侧导航；
3. 左侧导航的伸展收缩，同时改变图标的方向
4. 隐藏/显示导航，同时更改文字内容

 

知识点：

1.$().addClass()    $().removeClass()

2.使用index（）获取元素的索引值，然后使用eq（index）获取对应的左侧导航，更改css样式的display属性，然后通过siblings改变其他同级同胞的元素样式

3.收缩效果：$().slideToggle('fast');再点击需要添加判断条件，false == $().is(':visible')

改变图标的方向，因为图标来自font-awesome，直接更改了class

4.if判断，通过$().css('display',none'')更改样式

具体的可见历史内容