折叠菜单的效果,网上有很多的插件,比如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实现手机端折叠菜单效果的更多相关文章

  1. javascript实现的手风琴折叠菜单效果

    演示地址:http://codepen.io/anon/pen/pJERMq 实现效果: HTML代码: <!DOCTYPE html> <html lang="en&qu ...

  2. html5 手机端 通讯录 touch 效果

    不说那么多直接上代码. <html> <head> <meta http-equiv="Content-Type" content="tex ...

  3. 一个实现 手机端“输入验证码 ”效果Demo

    之前在“掘金”上看到这样一个demo 我觉得很有意思,于是今天把它搬下来,记在自己的“小本本”里也许会对以后的项目有点用,若要自己去实现这样一个案例也能实现,但是可能没有那么“妙”. 想法: 1.使用 ...

  4. H5手机端底部菜单覆盖中间部分内容的解决办法

    一.第一种Js动态计算中间内容的高度. 二.第二种给底部上面写个<div style="底部的高度"></div> 三.第三种给中间部分写一个margin- ...

  5. 手机端3d旋转木马效果+保存图片到本地

    <!DOCTYPE html> <html> <head> <title></title> <meta charset="U ...

  6. 原生Js_实现简单的下拉折叠菜单(添加弹出动画效果)

    用javascript实现简单的下拉折叠菜单效果 实现步骤 (a)获得各操作的dom对象: (b)在所有菜单按钮对象上添加单击事件: (c)设置所有菜单按钮样式为空,并将当前按钮的样式设置为“acti ...

  7. JSON无限折叠菜单编写

    最近看了一篇关于JSON无限折叠菜单的文章 感觉写的不错,也研究了下代码,所以用自己编码方式也做了个demo 其实这样的菜单项在我们网站上或者项目导航菜单项很常见的一种效果,特别是在一些电子商务网上上 ...

  8. 滑动式折叠菜单 - Slashdot's Menu

    折叠菜单让你在尽可能小的地方放置尽可能多的内容,同时加大了操作的简便性,因此,深受前台设计师的喜爱.随着大家对动画效果的钟爱,折叠菜单也开始“动”起来了,本文介绍的就是 DimX 制作的滑动式折叠菜单 ...

  9. JSON无限折叠菜单

    JSON无限折叠菜单编写 2013-12-14 22:37 by 龙恩0707, 103 阅读, 1 评论, 收藏, 编辑 最近看了一篇关于JSON无限折叠菜单的文章 感觉写的不错,也研究了下代码,所 ...

随机推荐

  1. ASP.NET自定义处理程序

    要创建自定义处理程序,可以创建一个实现IHttpHandler接口的类. 该类有两个重要的参数:IsResuable属性和ProcessRequest方法.如果处理程序实例可以在不同的请求中重用,Is ...

  2. Linux Smaba服务器配置

    Linux系统默认已经安装了Samba,但是没有安装Samba服务: 1,先查看安装情况:rpm -qa|grep samba 根据系统的安装情况选择下载或者通过光驱安装所缺的rpm包. 我的安装情况 ...

  3. Java在Debug的时候,有些变量能无限展开(循环了)?

    抛异常的时候,Java Debug 时,有些变量能无限展开,怎么做到的? 先来一个报错的例子: Exception in thread "main" java.lang.Stack ...

  4. 初识bd时的一些技能小贴士

    既然小豆腐如此给力,而且充分的利用主动学习的优势,已经有了迅速脑补,压倒式的优势,不过这只是表面而已,一切才刚刚开始,究竟鹿死谁手,还有待验证. 以上可以看到,小豆腐为什么拼命的要teach我们了么, ...

  5. oracle 的 SDO_GEOMETRY

    元数据定义 CREATE OR REPLACE TYPE MDSYS.SDO_GEOMETRY AS OBJECT ( SDO_GTYPE NUMBER, SDO_SRID NUMBER, SDO_P ...

  6. CSS背景图片常见属性设置

    在CSS中,图片属性的设置是必不可少的,下面介绍一下常见的图片属性: 1)背景图片插入:background-image:url(位置及名称);  //默认在父级元素内的左上角 2)背景平铺方式:ba ...

  7. 给自己的QQ群开启腾讯官方的群聊机器人

    看到腾讯有个机器人还不错 能聊天 能唱歌 方法:1.点击链接填写https://wj.qq.com/s/946969/64ac 群聊机器人内测邀请.按照提示填就行了 2.然后就是开启机器人了 http ...

  8. JavaScript中apply与call方法

    一.定义 apply:应用某一对象的一个方法,用另一个对象替换当前对象. call:调用一个对象的一个方法,以另一个对象替换当前对象. 二.apply //apply function Person( ...

  9. gsoap创建webservice服务简单教程

    版权声明:本文为博主原创文章,未经博主允许不得转载. 目录(?)[-] WebServicesoapgsoap 使用gsoap创建webservice服务 下载gsop 准备待导出的服务接口定义文件比 ...

  10. AOJ/树二叉搜索树习题集

    ALDS1_7_A-RootedTree. Description: A graph G = (V, E) is a data structure where V is a finite set of ...