slideToggle+slideup实现手机端折叠菜单效果
时间:2019-03-30
本文章向大家介绍slideToggle+slideup实现手机端折叠菜单效果,主要包括slideToggle+slideup实现手机端折叠菜单效果使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
折叠菜单的效果,网上有很多的插件,比如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>
效果如下:
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 求求你别再用 MySQL offset 和 limit 分页了?
- 短视频带货源码,获取购物车中所有商品列表并加载显示
- 【Flutter 实战】菜单(Menu)功能
- 【Flutter 实战】路由堆栈详解
- 【Flutter 实战】全局监听路由堆栈变化
- 数据挖掘从入门到放弃:线性回归和逻辑回归
- 【Flutter 实战】文件系统目录
- 【原创】Spring Boot终极篇《上》
- 【原创】Spring Boot终极篇《下》
- 面试官:JDK、JRE、JVM 三者什么关系?
- 面试官:什么是面向对象?
- 详解SpringCloud中RabbitMQ消息队列原理及配置,一篇就够!
- 面试官:什么是字节码?它最大的优势是什么?
- 数组转List,一定要小心这个坑!
- 【小白学PyTorch】5.torchvision预训练模型与数据集全览