淘宝---侧边栏信息展示效果

每个电商网站都少不了侧边栏，可是怎么才能写出易于修改与维护的高质量代码呢，其实完美的代码并没有，我们只能尽可能做最好的优化，在这里，我主要用到了闭包，面向对象思想，给构造函数扩展方法，还有就是css3的animation属性，以及bootstrop的图标

首先我们还是先看一下页面的整体结构：

（1）效果图

，

代码如下所示，

上面的这些是页面显示的效果，还有就是当点击一个li的时候，会显示出不同的界面；

 

 主要逻辑就是，先定义一个构造函数，在这里，我把构造函数放在了一个立即执行的匿名函数中，主要就是为了避免全局变量的污染，然后给构造函数扩展三个方法，即

分别表示关闭状态，打开状态，和切换状态；

当完成这些工作之后，就要开始考虑当点击不同的按钮的时候，显示出不同的内容，但是这里值的注意的是，事件会存在冒泡一说，所以我们必须阻止默认事件的产生，这里没有考虑IE的兼容性，