slideToggle+slideup实现手机端折叠菜单效果


Posted in Javascript onMay 25, 2017

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Javascript 去除数组的重复元素
May 04 Javascript
javascript 全选与全取消功能的实现代码
Dec 23 Javascript
JavaScript地图拖动功能SpryMap的简单实现
Jul 17 Javascript
jQuery添加/改变/移除CSS类及判断是否已经存在CSS
Aug 20 Javascript
Javascript基础教程之关键字和保留字汇总
Jan 18 Javascript
AngularJS教程之环境设置
Aug 16 Javascript
BootStrapValidator校验方式
Dec 19 Javascript
基于jQuery实现照片墙自动播放特效
Jan 12 Javascript
vue省市区三联动下拉选择组件的实现
Apr 28 Javascript
javascript编程开发中取色器及封装$函数用法示例
Aug 09 Javascript
JS模拟超市简易收银台小程序代码解析
Aug 18 Javascript
vue实现点击关注后及时更新列表功能
Jun 26 Javascript
Bootstrap实现的标签页内容切换显示效果示例
May 25 #Javascript
React-router中结合webpack实现按需加载实例
May 25 #Javascript
node.js操作mongodb简单示例分享
May 25 #Javascript
React-router 4 按需加载的实现方式及原理详解
May 25 #Javascript
node.js操作mysql简单实例
May 25 #Javascript
基于vue实现swipe分页组件实例
May 25 #Javascript
Javascript 实现匿名递归的实例代码
May 25 #Javascript
You might like
php实现mysql数据库操作类分享
2014/02/14 PHP
php获取bing每日壁纸示例分享
2014/02/25 PHP
PHP简单遍历对象示例
2016/09/28 PHP
PDO::inTransaction讲解
2019/01/28 PHP
详解no input file specified 三种解决方法
2019/11/29 PHP
JavaScript去掉数组中的重复元素
2011/01/13 Javascript
js中的布尔运算符使用介绍
2013/11/20 Javascript
jquery的总体架构分析及实现示例详解
2014/11/08 Javascript
jQuery实现TAB风格的全国省份城市滑动切换效果代码
2015/08/24 Javascript
javascript insertAfter()定义与用法示例
2016/07/25 Javascript
JS实现选定指定HTML元素对象中指定文本内容功能示例
2017/02/13 Javascript
手把手搭建安装基于windows的Vue.js运行环境
2017/06/12 Javascript
一个Java程序猿眼中的前后端分离以及Vue.js入门(推荐)
2019/04/19 Javascript
selenium+java中用js来完成日期的修改
2019/10/31 Javascript
详解Angular cli配置过程记录
2019/11/07 Javascript
javascript实现鼠标点击生成文字特效
2019/12/24 Javascript
本地文件上传到七牛云服务器示例(七牛云存储)
2014/01/11 Python
Python version 2.7 required, which was not found in the registry
2014/08/26 Python
Python3字符串学习教程
2015/08/20 Python
PyQt4实现下拉菜单可供选择并打印出来
2018/04/20 Python
使用Python和xlwt向Excel文件中写入中文的实例
2018/04/21 Python
完美解决安装完tensorflow后pip无法使用的问题
2018/06/11 Python
基于python-opencv3的图像显示和保存操作
2019/06/27 Python
python selenium 查找隐藏元素 自动播放视频功能
2019/07/24 Python
TensorFlow2.0矩阵与向量的加减乘实例
2020/02/07 Python
美国蔬菜和植物种子公司:Burpee
2017/02/01 全球购物
ECOSUSI官网:女式皮革背包
2019/09/27 全球购物
法学研究生自我鉴定范文
2013/12/04 职场文书
函授本科自我鉴定
2014/02/04 职场文书
批评与自我批评材料
2014/02/15 职场文书
感恩母亲节演讲稿
2014/05/07 职场文书
职员竞岗演讲稿
2014/05/14 职场文书
监察局领导班子四风问题整改措施思想汇报
2014/10/05 职场文书
党的群众路线教育实践活动个人对照检查材料(乡镇)
2014/11/05 职场文书
竞聘报告优秀范文
2014/11/06 职场文书
2015年行政人事部工作总结
2015/05/13 职场文书