欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

 更新時(shí)間：2016年12月27日 15:00:37   作者：xw1985520  
這篇文章主要介紹了基于jQuery實(shí)現(xiàn)左側(cè)菜單欄可折疊功能，介紹菜單折疊過程中三種變換形式，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

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

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

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

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>jQuery點(diǎn)擊展開收縮樹形菜單</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í)只能打開一個(gè)，其他都得處于關(guān)閉狀態(tài)。但是二級(jí)菜單下的開閉不會(huì)受到影響，也就是二級(jí)菜單本來是什么狀態(tài)，點(diǎn)擊任意一級(jí)菜單之后還是相應(yīng)的狀態(tài)。

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>jQuery點(diǎn)擊展開收縮樹形菜單</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í)只能打開一個(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)擊展開收縮樹形菜單</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>

 

這樣左側(cè)折疊菜單的三種狀態(tài)就都已經(jīng)實(shí)現(xiàn)了，是不是特別簡(jiǎn)單呀。

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

相關(guān)文章

最新評(píng)論