折叠菜单的效果,网上有很多的插件,比如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. win10 平台 elasticsearch 与 elasticsearch-head 的安装

    由于elasticsearch是基于java开发的,所以 第一步需要安装JDK. 具体JDK的安装步骤  http://jingyan.baidu.com/article/6dad5075d1dc40 ...

  2. 【iOS】7.4 定位服务->3.4 地图框架MapKit 功能4:地图截图

    本文并非最终版本,如果想要关注更新或更正的内容请关注文集,联系方式详见文末,如有疏忽和遗漏,欢迎指正. 本文相关目录: ================== 所属文集:[iOS]07 设备工具 === ...

  3. 【学而思】利用shouldComponentUpdate钩子函数优化react性能以及引入immutable库的必要性

    凡是参阅过react官方英文文档的童鞋大体上都能知道对于一个组件来说,其state的改变(调用this.setState()方法)以及从父组件接受的props发生变化时,会导致组件重渲染,正所谓&qu ...

  4. MYSQL表记录字段换行符回车符处理

    ), ), '');  CHAR(10): 换行符 CHAR(13): 回车符

  5. xmlplus 组件设计系列之三 - 文本框

    文本框是页面中最常用的输入组件,它的默认使用方式如下: <input type='text'/> 当然,这里的 `type='text' 可以略去不写.大部分情况下,使用默认的文本框作为输 ...

  6. C语言学习第九章

    学习C语言的最后一节课了,原因嘛上一章的末尾说过了,其实写这篇博客的时候以后开始学习Java一个多月了,一直因为各种各样的原因没有坚持做到每天一篇学习记录,可能主要因为懒吧....也有点笨,Java的 ...

  7. 京东商城首页jquery轮播特效

    <!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title> ...

  8. waiting for spring......

    世间哪得双全法,不负如来不负卿....<仓央嘉措>

  9. [ext4]01 磁盘布局 - block分析

    ext4文件系统最基本的分配单元是"block"(块). block是由一组连续的sectors来组成,其大小介于1k~4K之间,当然不可能是任意值,只能是2的整数次幂个secto ...

  10. 使用了UnityEditor中的API,打包时却不能打包UnityEditor的问题

    前段时间写了一篇名叫<Unity使用Windows弹窗保存图片>的文章 然而现在项目进入了测试阶段 就在发布的时候,这个地方出问题了 问题出在using UnityEditor; 如上文章 ...