slideToggle+slideup實現手機端折疊菜單效果

2019-11-19 16:29:32

字體：大中小

來源：轉載

供稿：網友

折疊菜單的效果，網上有很多的插件，比如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>

效果如下：