后台管理系统导航栏总结
一般后台的管理界面结构如下：顶部+左侧导航+内容区域+底部 主要实现以下功能：顶部导航模块添加class效果，给点击的元素添加背景颜色同时改变宽度，其他元素移除样式点击顶部导航显示对应的左侧导航；左侧导航的伸展收缩，同时改变图标的方向隐藏/显示导航，同时更改文字内容 知识点：1.$().addClass() $().removeClass()2.使用...
·
一般后台的管理界面结构如下：
顶部+左侧导航+内容区域+底部
主要实现以下功能：
- 顶部导航模块添加class效果，给点击的元素添加背景颜色同时改变宽度，其他元素移除样式
- 点击顶部导航显示对应的左侧导航；
- 左侧导航的伸展收缩，同时改变图标的方向
- 隐藏/显示导航，同时更改文字内容
知识点：
1.$().addClass() $().removeClass()
2.使用index（）获取元素的索引值，然后使用eq（index）获取对应的左侧导航，更改css样式的display属性，然后通过siblings改变其他同级同胞的元素样式
3.收缩效果：$().slideToggle('fast');再点击需要添加判断条件，false == $().is(':visible')
改变图标的方向，因为图标来自font-awesome，直接更改了class
4.if判断，通过$().css('display',none'')更改样式
具体的可见历史内容
基于 Vue 的企业级 UI 组件库和中后台系统解决方案，为数万开发者服务。
更多推荐
1
0- 0
已为社区贡献1条内容
所有评论(0)