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 相关文章推荐
Using the TextRange Object
Oct 14 Javascript
js 利用className得到对象的实现代码
Nov 15 Javascript
jquery简单瀑布流实现原理及ie8下测试代码
Jan 23 Javascript
js实现弹窗插件功能实例代码分享
Dec 12 Javascript
浅谈JavaScript中Date(日期对象),Math对象
Feb 05 Javascript
JavaScript保留关键字汇总
Dec 01 Javascript
js实现碰撞检测特效代码分享
Oct 16 Javascript
easyui导出excel无法弹出下载框的快速解决方法
Nov 10 Javascript
分享5个顶级的JavaScript Ajax组件库
Sep 16 Javascript
JavaScript中的垃圾回收与内存泄漏示例详解
May 02 Javascript
JavaScript实现的联动菜单特效示例
Jul 08 Javascript
vue + axios get下载文件功能
Sep 25 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面向对象全攻略 (十四) php5接口技术
2009/09/30 PHP
19个超实用的PHP代码片段
2014/03/14 PHP
jquery 屏蔽一个区域内的所有元素,禁止输入
2009/10/22 Javascript
关于Jquery操作Cookie取值错误的解决方法
2013/08/26 Javascript
兼容IE、firefox以及chrome的js获取时间(getFullYear)
2014/07/04 Javascript
JavaScript实现重置表单(reset)的方法
2015/04/02 Javascript
Js实现无刷新删除内容
2015/04/29 Javascript
详解JavaScript逻辑And运算符
2015/12/04 Javascript
jquery form表单获取内容以及绑定数据
2016/02/24 Javascript
js学习阶段总结(必看篇)
2016/06/16 Javascript
一个非常好用的文字滚动的案例,鼠标悬浮可暂停[两种方案任选]
2016/12/01 Javascript
使用bootstrap-paginator.js 分页来进行ajax 异步分页请求示例
2017/03/09 Javascript
JavaScript数据结构中串的表示与应用实例
2017/04/12 Javascript
angularJs的ng-class切换class
2017/06/23 Javascript
jquery之基本选择器practice(实例讲解)
2017/09/30 jQuery
nodejs判断文件、文件夹是否存在及删除的方法
2017/11/10 NodeJs
jQuery中将json数据显示到页面表格的方法
2018/05/27 jQuery
讲解vue-router之命名路由和命名视图
2018/05/28 Javascript
vue安装遇到的5个报错及解决方法
2019/06/12 Javascript
vue+element-ui表格封装tag标签使用插槽
2020/06/18 Javascript
Python实现的数据结构与算法之队列详解
2015/04/22 Python
Python 文件处理注意事项总结
2017/04/10 Python
Python排序搜索基本算法之堆排序实例详解
2017/12/08 Python
python读取视频流提取视频帧的两种方法
2020/10/22 Python
python获取指定字符串中重复模式最高的字符串方法
2018/06/29 Python
Python中文编码知识点
2019/02/18 Python
如何基于Python爬取隐秘的角落评论
2020/07/02 Python
Python如何给函数库增加日志功能
2020/08/04 Python
Python通过getattr函数获取对象的属性值
2020/10/16 Python
大学生找工作求职信
2014/07/09 职场文书
2014年卫生保健工作总结
2014/12/08 职场文书
交通安全月活动总结
2015/05/08 职场文书
校车司机安全责任书
2015/05/11 职场文书
民事答辩状范本
2015/05/21 职场文书
小学开学典礼新闻稿
2015/07/17 职场文书
springboot临时文件存储目录配置方式
2021/07/01 Java/Android