本文主要为大家详细介绍了slidetoggle+slideup实现手机端折叠菜单效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能帮助到大家。
折叠菜单的效果，网上有很多的插件，比如bootstrap的 Collapse ，很好用也很简单，但是如果你使用的不是bootstrap框架，就会造成很多不必要的麻烦，比如默认样式被修改，代码冗余等等，一般网上也有很多基于jQuery的插件，但是也都过于繁琐，今天我就给大家说下，使用jQuery自带的函数，实现这种效果，话不多少，直接上代码：
HTML部分：
- 绿色校园
- 篮球场
- 篮球场
- 篮球场
- 篮球场
- 篮球场
- 绿色校园
- 篮球场
- 篮球场
- 篮球场
- 篮球场
- 篮球场
- 篮球场
- 绿色校园
- 篮球场
- 篮球场
- 篮球场
- 篮球场
- 篮球场
- 篮球场
CSS部分：
js部分(记得引入jQuery)：
<ｓｃｒｉｐｔ> (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();//调用效果如下：
相关推荐：
浅析jquery中的toggle与slideToggle的区别
jquery隐藏、显示事件and提示callback、淡入淡出fadeToggle、滑入滑出slideToggle、动画animate停止动画stop
JQury slideToggle闪烁问题及解决办法
