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

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

HTML部分：

<p 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>
</p>

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)：

效果如下：

相关推荐：

浅析jquery中的toggle与slideToggle的区别

jquery隐藏、显示事件and提示callback、淡入淡出fadeToggle、滑入滑出slideToggle、动画animate停止动画stop

JQury slideToggle闪烁问题及解决办法

以上就是slideToggle+slideup实现手机端折叠菜单效果实例代码的详细内容，更多请关注Gxl网其它相关文章！