频道导航

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

2019-01-07 JavaScript 前端之家

前端之家收集整理的这篇文章主要介绍了slideToggle+slideup实现手机端折叠菜单效果，前端之家小编觉得挺不错的，现在分享给大家，也给大家做个参考。

折叠菜单的效果，网上有很多的插件，比如bootstrap的 Collapse ，很好用也很简单，但是如果你使用的不是bootstrap框架，就会造成很多不必要的麻烦，比如默认样式被修改，代码冗余等等，一般网上也有很多基于jQuery的插件，但是也都过于繁琐，今天我就给大家说下，使用jQuery自带的函数，实现这种效果，话不多少，直接上代码：

HTML部分：

篮球场

篮球场
篮球场
篮球场
篮球场
篮球场

篮球场
篮球场
篮球场
篮球场
篮球场

CSS部分：

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%; }

js部分(记得引入jQuery)：

/**处理折叠效果**/ (function ($) { $.fn.Fold = function (options) { //默认参数设置 var settings = { speed: 300 //折叠速度(值越大越慢) } //不为空则合并参数 if (options) $.extend(settings,options);

  //遵循链式原则
  return this.each(function () {
    //为每个li元素绑定点击事件
    $("&gt; li",this).each(function () {
      $(this).bind("click",function () {
        //单击之前先判断当前<a href="/tag/caidan/" target="_blank" class="keywords">菜单</a>是否折叠
        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')//<a href="/tag/tianjia/" target="_blank" class="keywords">添加</a>选中样式
          $(this).next("ol").slideToggle(settings.speed);
        }
      });
    });
    //默认折叠
    $("&gt; ol",this).hide();
  });
}

})(jQuery);
$(".inner").Fold();//调用

效果如下：