jquery如何模拟京东实现侧边栏导航效果-创新互联

小编给大家分享一下jquery如何模拟京东实现侧边栏导航效果，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！

创新互联2013年至今，先为湖南等服务建站，湖南等地企业，进行企业商务咨询服务。为湖南企业网站制作PC+手机+微官网三网同步一站式服务解决您的所有建站问题。

样式代码

jQuery代码

这里把图片的名称换成数字的，每一个图标都有两个图片，一个白色和一个绿色的，当鼠标移动到其中一个图标处时，改变其图片使其变色，因为一共有八个图标，所以总共有16张图片。因此图片名改变为当前图片名称数字+8。

这里用的动态是slideDown与slideUp。需要注意的是要设置索引来寻找但前对象的位置（因为是在for循环里有了索引才能找到当前对象的图片的数字名称）。

布局代码