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

折叠菜单的效果，网上有很多的插件，比如bootstrap的Collapse，很好用也很简单，但是如果你

折叠菜单的效果，网上有很多的插件，比如bootstrap的 Collapse ，很好用也很简单，但是如果你使用的不是bootstrap框架，就会造成很多不必要的麻烦，比如默认样式被修改，代码冗余等等，一般网上也有很多基于jQuery的插件，但是也都过于繁琐，今天我就给大家说下，使用jQuery自带的函数，实现这种效果，话不多少，直接上代码：

HTML部分：

<div class="box">
 <!-- 内容-->
 <ul class="inner">
 <li class="inner_title">绿色校园<span></span></li>
 <ol class="inner_style">
 <li>篮球场</li>
 <li>篮球场</li>
 <li>篮球场</li>
 <li>篮球场</li>
 <li>篮球场</li>
 </ol>
 <li class="inner_title">绿色校园<span></span></li>
 <ol class="inner_style">
 <li>篮球场</li>
 <li>篮球场</li>
 <li>篮球场</li>
 <li>篮球场</li>
 <li>篮球场</li>
 <li>篮球场</li>
 </ol>
 <li class="inner_title">绿色校园<span></span></li>
 <ol class="inner_style">
 <li>篮球场</li>
 <li>篮球场</li>
 <li>篮球场</li>
 <li>篮球场</li>
 <li>篮球场</li>
 <li>篮球场</li>
 </ol>
 </ul>
</div>

CSS部分：

<style>
 body{
 background: #dddddd;
 }
 .inner{
 background: #fff;
 width: 100%;
 overflow: hidden;
 list-style: none;
 margin: 0;
 padding: 0;
 }
 .inner .inner_title{
 background-color: #fff;
 width: 100%;
 padding: 0 2.5%;
 border-bottom: 1px solid #efefef;
 color: #343434;
 height: 40px;
 line-height: 40px;
 font-size: 16px;
 position: relative;
 }
 .inner .inner_title span{
 position: absolute;
 width: 20px;
 height: 20px;
 top: 50%;
 margin-top: -10px;
 right: 6%;
 background: url("images/arow_left.png") no-repeat center;
 }
 .inner .inner_title.active{
 color: #4db780;
 }
 .inner .inner_title.active span{
 background: url("images/arow_down.png") no-repeat center;
 }
 /*弹出的二级分类处理*/
 .inner .inner_style{
 margin: 0;
 list-style: none;
 width: 100%;
 background-color: #efefef;
 overflow: hidden;
 padding: 15px 3%;
 }
 .inner .inner_style li{
 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>

效果如下：

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

slideToggle slideup 手机端 折叠菜单