基于jQuery實(shí)現(xiàn)左側(cè)菜單欄可折疊功能

2019-11-19 18:14:21

字體：大中小

供稿：網(wǎng)友

今天給大家介紹一下左側(cè)菜單欄可折疊功能，在后臺(tái)管理中左側(cè)菜單折疊功能是特別常見(jiàn)的一個(gè)功能，基本不管是什么類型的管理后臺(tái)都會(huì)涉及到這個(gè)功能的實(shí)現(xiàn)。

今天給大家介紹的是二級(jí)可折疊菜單的功能，相對(duì)一級(jí)的菜單折疊功能就顯得稍微比較復(fù)雜一點(diǎn)了，我這里將給大家介紹菜單折疊過(guò)程中三種變換形式。

第一種變換形式是：不管點(diǎn)擊哪一級(jí)菜單都可以打開(kāi)或者關(guān)閉本級(jí)菜單，但是不會(huì)影響其他級(jí)別的菜單：

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>jQuery點(diǎn)擊展開(kāi)收縮樹(shù)形菜單</title> <style type="text/css"> *{margin: 0;padding: 0} body{font-size: 12px;font-family: "宋體","微軟雅黑";} ul,li{list-style: none;} a:link,a:visited{text-decoration: none;color: #fff;} .list{width: 210px;border-bottom:solid 1px #316a91;margin:40px auto 0 auto;} .list ul li{background-color:#467ca2; border:solid 1px #316a91; border-bottom:0;} .list ul li a{padding-left: 10px;color: #fff; font-size:12px; display: block; font-weight:bold; height:36px;line-height: 36px;position: relative; } .list ul li .inactive{ background:url(images/off.png) no-repeat 184px center;} .list ul li .inactives{background:url(images/on.png) no-repeat 184px center;}  .list ul li ul{display: none;} .list ul li ul li { border-left:0; border-right:0; background-color:#6196bb; border-color:#467ca2;} .list ul li ul li ul{display: none;} .list ul li ul li a{ padding-left:20px;} .list ul li ul li ul li { background-color:#d6e6f1; border-color:#6196bb; } .last{ background-color:#d6e6f1; border-color:#6196bb; } .list ul li ul li ul li a{ color:#316a91; padding-left:30px;} </style> <script type="text/javascript" src="jquery-1.11.1.min.js"></script> <script type="text/javascript"> $(document).ready(function() {  $('.inactive').click(function(){   if($(this).siblings('ul').css('display')=='none'){    $(this).addClass('inactives');    $(this).siblings('ul').slideDown(100).children('li');   }else{    $(this).removeClass('inactives');    $(this).siblings('ul').slideUp(100);   }  }) }); </script></head><body> <div class="list">  <ul class="yiji">   <li><a href="#">中國(guó)美協(xié)章程</a></li>   <li><a href="#" class="inactive active">中國(guó)文聯(lián)美術(shù)藝術(shù)中心</a>    <ul>     <li><a href="#">綜合部</a></li>     <li><a href="#">大型活動(dòng)部</a></li>     <li><a href="#">展覽部</a></li>     <li><a href="#">藝委會(huì)工作部</a></li>     <li><a href="#">信息資源部</a></li>     <li><a href="#">雙年展辦公室</a></li>    </ul>   </li>   <li><a href="#" class="inactive">組織機(jī)構(gòu)</a>    <ul style="display: none">     <li><a href="#" class="inactive active">美協(xié)機(jī)關(guān)</a>      <ul>       <li><a href="#">辦公室</a></li>       <li><a href="#">人事處</a></li>       <li><a href="#">組聯(lián)部</a></li>       <li><a href="#">外聯(lián)部</a></li>       <li><a href="#">研究部</a></li>       <li><a href="#">維權(quán)辦</a></li>      </ul>     </li>      <li><a href="#" class="inactive active">中國(guó)文聯(lián)美術(shù)藝術(shù)中心</a>       <ul>       <li><a href="#">綜合部</a></li>       <li><a href="#">大型活動(dòng)部</a></li>       <li><a href="#">展覽部</a></li>       <li><a href="#">藝委會(huì)工作部</a></li>       <li><a href="#">信息資源部</a></li>       <li><a href="#">雙年展辦公室</a></li>      </ul>     </li>     <li class="last"><a href="#">《美術(shù)》雜志社</a></li>    </ul>   </li>   <li><a href="#" class="inactive">組織機(jī)構(gòu)</a>    <ul style="display: none">     <li><a href="#" class="inactive active">美協(xié)機(jī)關(guān)</a>      <ul>       <li><a href="#">辦公室</a></li>       <li><a href="#">人事處</a></li>       <li><a href="#">組聯(lián)部</a></li>       <li><a href="#">外聯(lián)部</a></li>       <li><a href="#">研究部</a></li>       <li><a href="#">維權(quán)辦</a></li>      </ul>     </li>     <li><a href="#" class="inactive active">中國(guó)文聯(lián)美術(shù)藝術(shù)中心</a>      <ul>       <li><a href="#">綜合部</a></li>       <li><a href="#">大型活動(dòng)部</a></li>       <li><a href="#">展覽部</a></li>       <li><a href="#">藝委會(huì)工作部</a></li>       <li><a href="#">信息資源部</a></li>       <li><a href="#">雙年展辦公室</a></li>      </ul>     </li>     <li class="last"><a href="#">《美術(shù)》雜志社</a></li>    </ul>   </li>  </ul> </div></body></html>

運(yùn)行截圖為：

第二種變換形式是：一級(jí)菜單會(huì)互相影響，也就是一級(jí)菜單同時(shí)只能打開(kāi)一個(gè)，其他都得處于關(guān)閉狀態(tài)。但是二級(jí)菜單下的開(kāi)閉不會(huì)受到影響，也就是二級(jí)菜單本來(lái)是什么狀態(tài)，點(diǎn)擊任意一級(jí)菜單之后還是相應(yīng)的狀態(tài)。

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>jQuery點(diǎn)擊展開(kāi)收縮樹(shù)形菜單</title> <style type="text/css"> *{margin: 0;padding: 0} body{font-size: 12px;font-family: "宋體","微軟雅黑";} ul,li{list-style: none;} a:link,a:visited{text-decoration: none;color: #fff;} .list{width: 210px;border-bottom:solid 1px #316a91;margin:40px auto 0 auto;} .list ul li{background-color:#467ca2; border:solid 1px #316a91; border-bottom:0;} .list ul li a{padding-left: 10px;color: #fff; font-size:12px; display: block; font-weight:bold; height:36px;line-height: 36px;position: relative; } .list ul li .inactive{ background:url(images/off.png) no-repeat 184px center;} .list ul li .inactives{background:url(images/on.png) no-repeat 184px center;}  .list ul li ul{display: none;} .list ul li ul li { border-left:0; border-right:0; background-color:#6196bb; border-color:#467ca2;} .list ul li ul li ul{display: none;} .list ul li ul li a{ padding-left:20px;} .list ul li ul li ul li { background-color:#d6e6f1; border-color:#6196bb; } .last{ background-color:#d6e6f1; border-color:#6196bb; } .list ul li ul li ul li a{ color:#316a91; padding-left:30px;} </style> <script type="text/javascript" src="jquery-1.11.1.min.js"></script> <script type="text/javascript"> $(document).ready(function() {  $('.inactive').click(function(){   var className=$(this).parents('li').parents().attr('class');   if($(this).siblings('ul').css('display')=='none'){    if(className=="yiji"){     $(this).parents('li').siblings('li').children('ul').parent('li').children('a').removeClass('inactives');     $(this).parents('li').siblings('li').children('ul').slideUp(100);    }    $(this).addClass('inactives');    $(this).siblings('ul').slideDown(100).children('li');   }else {    $(this).removeClass('inactives');    $(this).siblings('ul').slideUp(100);   }  }) }); </script></head><body> <div class="list">  <ul class="yiji">   <li><a href="#">中國(guó)美協(xié)章程</a></li>   <li><a href="#" class="inactive active">中國(guó)文聯(lián)美術(shù)藝術(shù)中心</a>    <ul>     <li><a href="#">綜合部</a></li>     <li><a href="#">大型活動(dòng)部</a></li>     <li><a href="#">展覽部</a></li>     <li><a href="#">藝委會(huì)工作部</a></li>     <li><a href="#">信息資源部</a></li>     <li><a href="#">雙年展辦公室</a></li>    </ul>   </li>   <li><a href="#" class="inactive">組織機(jī)構(gòu)</a>    <ul style="display: none">     <li><a href="#" class="inactive active">美協(xié)機(jī)關(guān)</a>      <ul>       <li><a href="#">辦公室</a></li>       <li><a href="#">人事處</a></li>       <li><a href="#">組聯(lián)部</a></li>       <li><a href="#">外聯(lián)部</a></li>       <li><a href="#">研究部</a></li>       <li><a href="#">維權(quán)辦</a></li>      </ul>     </li>      <li><a href="#" class="inactive active">中國(guó)文聯(lián)美術(shù)藝術(shù)中心</a>       <ul>       <li><a href="#">綜合部</a></li>       <li><a href="#">大型活動(dòng)部</a></li>       <li><a href="#">展覽部</a></li>       <li><a href="#">藝委會(huì)工作部</a></li>       <li><a href="#">信息資源部</a></li>       <li><a href="#">雙年展辦公室</a></li>      </ul>     </li>     <li class="last"><a href="#">《美術(shù)》雜志社</a></li>    </ul>   </li>   <li><a href="#" class="inactive">組織機(jī)構(gòu)</a>    <ul style="display: none">     <li><a href="#" class="inactive active">美協(xié)機(jī)關(guān)</a>      <ul>       <li><a href="#">辦公室</a></li>       <li><a href="#">人事處</a></li>       <li><a href="#">組聯(lián)部</a></li>       <li><a href="#">外聯(lián)部</a></li>       <li><a href="#">研究部</a></li>       <li><a href="#">維權(quán)辦</a></li>      </ul>     </li>     <li><a href="#" class="inactive active">中國(guó)文聯(lián)美術(shù)藝術(shù)中心</a>      <ul>       <li><a href="#">綜合部</a></li>       <li><a href="#">大型活動(dòng)部</a></li>       <li><a href="#">展覽部</a></li>       <li><a href="#">藝委會(huì)工作部</a></li>       <li><a href="#">信息資源部</a></li>       <li><a href="#">雙年展辦公室</a></li>      </ul>     </li>     <li class="last"><a href="#">《美術(shù)》雜志社</a></li>    </ul>   </li>  </ul> </div></body></html>

第三種變換形式是：一級(jí)菜單會(huì)互相影響，也就是一級(jí)菜單同時(shí)只能打開(kāi)一個(gè)，其他都得處于關(guān)閉狀態(tài)。而且二級(jí)菜單也會(huì)受到影響，也就是當(dāng)點(diǎn)擊一級(jí)菜單的時(shí)候，所有的二級(jí)菜單都會(huì)處于關(guān)閉的狀態(tài)。

<!DOCTYPE html><html lang="en"><head>  <meta charset="UTF-8">  <title>jQuery點(diǎn)擊展開(kāi)收縮樹(shù)形菜單</title>  <style type="text/css">  *{margin: 0;padding: 0}  body{font-size: 12px;font-family: "宋體","微軟雅黑";}  ul,li{list-style: none;}  a:link,a:visited{text-decoration: none;color: #fff;}  .list{width: 210px;border-bottom:solid 1px #316a91;margin:40px auto 0 auto;}  .list ul li{background-color:#467ca2; border:solid 1px #316a91; border-bottom:0;}  .list ul li a{padding-left: 10px;color: #fff; font-size:12px; display: block; font-weight:bold; height:36px;line-height: 36px;position: relative;  }  .list ul li .inactive{ background:url(images/off.png) no-repeat 184px center;}  .list ul li .inactives{background:url(images/on.png) no-repeat 184px center;}   .list ul li ul{display: none;}  .list ul li ul li { border-left:0; border-right:0; background-color:#6196bb; border-color:#467ca2;}  .list ul li ul li ul{display: none;}  .list ul li ul li a{ padding-left:20px;}  .list ul li ul li ul li { background-color:#d6e6f1; border-color:#6196bb; }  .last{ background-color:#d6e6f1; border-color:#6196bb; }  .list ul li ul li ul li a{ color:#316a91; padding-left:30px;}  </style>  <script type="text/javascript" src="jquery-1.11.1.min.js"></script>  <script type="text/javascript">  $(document).ready(function() {    $('.inactive').click(function(){      var className=$(this).parents('li').parents().attr('class');      if($(this).siblings('ul').css('display')=='none'){        if(className=="yiji"){          $(this).parents('li').siblings('li').children('ul').parent('li').children('a').removeClass('inactives');          $(this).parents('li').siblings('li').children('ul').slideUp(100);          $(this).parents('li').children('ul').children('li').children('ul').parent('li').children('a').removeClass('inactives');          $(this).parents('li').children('ul').children('li').children('ul').slideUp(100);        }        $(this).addClass('inactives');        $(this).siblings('ul').slideDown(100);      }else{        $(this).removeClass('inactives');        $(this).siblings('ul').slideUp(100);      }    })  });  </script></head><body>  <div class="list">    <ul class="yiji">      <li><a href="#">中國(guó)美協(xié)章程</a></li>      <li><a href="#" class="inactive active">中國(guó)文聯(lián)美術(shù)藝術(shù)中心</a>        <ul>          <li><a href="#">綜合部</a></li>          <li><a href="#">大型活動(dòng)部</a></li>          <li><a href="#">展覽部</a></li>          <li><a href="#">藝委會(huì)工作部</a></li>          <li><a href="#">信息資源部</a></li>          <li><a href="#">雙年展辦公室</a></li>        </ul>      </li>      <li><a href="#" class="inactive">組織機(jī)構(gòu)</a>        <ul style="display: none">          <li><a href="#" class="inactive active">美協(xié)機(jī)關(guān)</a>            <ul>              <li><a href="#">辦公室</a></li>              <li><a href="#">人事處</a></li>              <li><a href="#">組聯(lián)部</a></li>              <li><a href="#">外聯(lián)部</a></li>              <li><a href="#">研究部</a></li>              <li><a href="#">維權(quán)辦</a></li>            </ul>          </li>           <li><a href="#" class="inactive active">中國(guó)文聯(lián)美術(shù)藝術(shù)中心</a>              <ul>              <li><a href="#">綜合部</a></li>              <li><a href="#">大型活動(dòng)部</a></li>              <li><a href="#">展覽部</a></li>              <li><a href="#">藝委會(huì)工作部</a></li>              <li><a href="#">信息資源部</a></li>              <li><a href="#">雙年展辦公室</a></li>            </ul>          </li>          <li class="last"><a href="#">《美術(shù)》雜志社</a></li>        </ul>      </li>      <li><a href="#" class="inactive">組織機(jī)構(gòu)</a>        <ul style="display: none">          <li><a href="#" class="inactive active">美協(xié)機(jī)關(guān)</a>            <ul>              <li><a href="#">辦公室</a></li>              <li><a href="#">人事處</a></li>              <li><a href="#">組聯(lián)部</a></li>              <li><a href="#">外聯(lián)部</a></li>              <li><a href="#">研究部</a></li>              <li><a href="#">維權(quán)辦</a></li>            </ul>          </li>          <li><a href="#" class="inactive active">中國(guó)文聯(lián)美術(shù)藝術(shù)中心</a>            <ul>              <li><a href="#">綜合部</a></li>              <li><a href="#">大型活動(dòng)部</a></li>              <li><a href="#">展覽部</a></li>              <li><a href="#">藝委會(huì)工作部</a></li>              <li><a href="#">信息資源部</a></li>              <li><a href="#">雙年展辦公室</a></li>            </ul>          </li>          <li class="last"><a href="#">《美術(shù)》雜志社</a></li>        </ul>      </li>    </ul>  </div></body></html>