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