slideToggle+slideup实现手机端折叠菜单效果

float: left;
color: #333;
font-size: 14px;
width: 21%;
text-align: center;
line-height: 30px;
margin-right: 5%;
}
</style>

js部分(记得引入jQuery)：

<script>
  /**处理折叠效果**/
  (function ($) {
    $.fn.Fold = function (options) {
      //默认参数设置
      var settings = {
        speed: 300 //折叠速度(值越大越慢)
      }
      //不为空则合并参数
      if (options)
        $.extend(settings, options);
      //遵循链式原则
      return this.each(function () {
        //为每个li元素绑定点击事件
        $("> li", this).each(function () {
          $(this).bind("click", function () {
            //单击之前先判断当前菜单是否折叠
            if($(this).hasClass('active')){//折叠状态
              $(".inner ol").slideUp('500');//使用slideup()折叠其他选项
              $(this).removeClass('active');//移除选中样式
            }else{//打开状态
              $(this).siblings('li').removeClass('active');
              $(".inner ol").slideUp('500');//使用slideup()折叠其他选项
              $(this).addClass('active')//添加选中样式
              $(this).next("ol").slideToggle(settings.speed);
            }
          });
        });
        //默认折叠
        $("> ol", this).hide();
      });
    }
  })(jQuery);
  $(".inner").Fold();//调用
</script>

效果如下：