用jquery封装的手风琴特效插件

      这里只提供了jquery封装的代码段，至于HTML中的结构和元素样式不在此列出，本代码段只起到一个手风琴特效封装原理的参考作用。

;(function ($) {  $.fn.extend({    //传参：传的是背景色数组和手风琴发生效果后的其他li的宽度    'accordition': function (colors, width) {      colors = colors || [];      width = width || 0;      //下面这个this指代调用这个方法的jquery对象，所以不用加$      var $li = this.find('li');      var $boxLength = this.width();      var $maxLength = $boxLength - ($li.length - 1) * width;      var $aveLength = $boxLength / $li.length;      //更改li的颜色      $li.each(function (i, e) {        $(e).css('backgroundColor', colors[i]);      });      //给li注册鼠标悬停事件      $li.on('mouseenter', function () {        $(this).stop().animate({width: $maxLength}).siblings().stop().animate({width: width});      });      //给li注册鼠标离开事件      $li.on('mouseleave', function () {        $li.stop().animate({width: $aveLength});      });    }  })})(jQuery);