折叠菜单的效果,网上有很多的插件,比如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. 常用linux命令及其设置

    完成一个运维的工作,以下的命令和配置是经常会用到的,总结一下工作以来的命令和配置 linux常用命令 linux客户端挂接(mount)其他linux系统或UNIX系统的NFS共享 $ mkdir – ...

  2. 微软 深度学习 cntk ,我目前见过 安装方式最简单的一个框架,2.0之后开始支持C# 咯

    嗨,你也是我这种手残党么?之前试着安装着mxnet和tensorflow,但是因为时间比较短所以往往来不及安装完就失去兴趣,今天看到微软的cntk可以用了,一次性安装好了,并且测试通过 本人环境: W ...

  3. 给我的cnblogs主页做一个响应式布局模板

    在cnblogs,一直都是使用官方自带的那些模板,而且感觉也一直很良好!不过最近用手机搜索一些相关的技术资料,很多都来自cnblogs,有些博主的页面在和机端显得很好,有些则展示得不那么友好了……忽然 ...

  4. fir.im Weekly - 如何在 iOS 上构建 TensorFlow 应用

    本期 fir.im Weekly 收集了最近新鲜出炉的 iOS /Android 技术分享,包括 iOS 系统开发 TensorFlow 教程.iOS 新架构.iOS Notifications 推送 ...

  5. C++ 窗口可改风格

    SetWindowLong(m_hWnd,GWL_STYLE,::GetWindowLong(m_hWnd,GWL_STYLE)& ~WS_MAXIMIZEBOX);//去掉最大化 GWL_S ...

  6. JS中的循环嵌套 BOM函数

    [嵌套循环特点]                           外层循环转一次,内层循环转一圈              外层循环控制行数,内层循环控制每行元素个数             [做 ...

  7. 使用validator-api来验证spring-boot的参数

    作为服务端开发,验证前端传入的参数的合法性是一个必不可少的步骤,但是验证参数是一个基本上是一个体力活,而且冗余代码繁多,也影响代码的可阅读性,所以有没有一个比较优雅的方式来解决这个问题? 这么简单的问 ...

  8. DirectFB环境搭建

    一.下载安装包 http://www.directfb.org/index.php?path=Main%2FDownloads git clone git://git.directfb.org/git ...

  9. windows和linux双系统修改启动项

    在windows系统的基础上再装linux系统的时候,电脑启动就会出现linux的启动引导项,默认的是进入linux.要使电脑默认进入windows只需要修改linux系统的启动引导文件(grub.c ...

  10. 安装php提示 configure: error: Cannot find OpenSSL's libraries 解决方案

    一次在安装php7其中提示错误信息 configure: error: Cannot find OpenSSL's libraries 出现这种有2中情况,一种是没有安装 openssl,另一种是安装 ...