基于jQuery实现左侧菜单栏可折叠功能

今天给大家介绍一下左侧菜单栏可折叠功能，在后台管理中左侧菜单折叠功能是特别常见的一个功能，基本不管是什么类型的管理后台都会涉及到这个功能的实现。

今天给大家介绍的是二级可折叠菜单的功能，相对一级的菜单折叠功能就显得稍微比较复杂一点了，我这里将给大家介绍菜单折叠过程中三种变换形式。

第一种变换形式

是：不管点击哪一级菜单都可以打开或者关闭本级菜单，但是不会影响其他级别的菜单：

rush:xhtml;"> <Meta charset="UTF-8">

运行截图为：

第二种变换形式

是：一级菜单会互相影响，也就是一级菜单同时只能打开一个，其他都得处于关闭状态。但是二级菜单下的开闭不会受到影响，也就是二级菜单本来是什么状态，点击任意一级菜单之后还是相应的状态。

rush:xhtml;"> <Meta charset="UTF-8">

第三种变换形式

是：一级菜单会互相影响，也就是一级菜单同时只能打开一个，其他都得处于关闭状态。而且二级菜单也会受到影响，也就是当点击一级菜单的时候，所有的二级菜单都会处于关闭的状态。

rush:xhtml;"> <Meta charset="UTF-8">

  <li><a href="#" class="inactive"&gt;组织机构</a>
    <ul style="display: none"&gt;
      <li><a href="#" class="inactive active"&gt;美协机关</a>
        <ul>
          <li><a href="#"&gt;办公室</a></li>
          <li><a href="#"&gt;人事处</a></li>
          <li><a href="#"&gt;组联部</a></li>
          <li><a href="#"&gt;外联部</a></li>
          <li><a href="#"&gt;研究部</a></li>
          <li><a href="#"&gt;维权办</a></li>
        </ul>
      </li> 
      <li><a href="#" class="inactive active"&gt;中国文联美术艺术中心</a>  
        <ul>
          <li><a href="#"&gt;综合部</a></li>
          <li><a href="#"&gt;大型活动部</a></li>
          <li><a href="#"&gt;展览部</a></li>
          <li><a href="#"&gt;艺委会工作部</a></li>
          <li><a href="#"&gt;信息资源部</a></li>
          <li><a href="#"&gt;双年展办公室</a></li>
        </ul>
      </li>
      <li class="last"&gt;<a href="#"&gt;《美术》杂志社</a></li>
    </ul>
  </li>


  <li><a href="#" class="inactive"&gt;组织机构</a>
    <ul style="display: none"&gt;
      <li><a href="#" class="inactive active"&gt;美协机关</a>
        <ul>
          <li><a href="#"&gt;办公室</a></li>
          <li><a href="#"&gt;人事处</a></li>
          <li><a href="#"&gt;组联部</a></li>
          <li><a href="#"&gt;外联部</a></li>
          <li><a href="#"&gt;研究部</a></li>
          <li><a href="#"&gt;维权办</a></li>
        </ul>
      </li>
      <li><a href="#" class="inactive active"&gt;中国文联美术艺术中心</a>
        <ul>
          <li><a href="#"&gt;综合部</a></li>
          <li><a href="#"&gt;大型活动部</a></li>
          <li><a href="#"&gt;展览部</a></li>
          <li><a href="#"&gt;艺委会工作部</a></li>
          <li><a href="#"&gt;信息资源部</a></li>
          <li><a href="#"&gt;双年展办公室</a></li>
        </ul>
      </li>
      <li class="last"&gt;<a href="#"&gt;《美术》杂志社</a></li>
    </ul>
  </li>
</ul>

这样左侧折叠菜单的三种状态就都已经实现了，是不是特别简单呀。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程之家。