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

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

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

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

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

第一種變換形式是：不管點擊哪一級菜單都可以打開或者關閉本級菜單，但是不會影響其他級別的菜單：

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>jQuery點擊展開收縮樹形菜單</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="#">中國美協(xié)章程</a></li>
   <li><a href="#" class="inactive active">中國文聯(lián)美術藝術中心</a>
    <ul>
     <li><a href="#">綜合部</a></li>
     <li><a href="#">大型活動部</a></li>
     <li><a href="#">展覽部</a></li>
     <li><a href="#">藝委會工作部</a></li>
     <li><a href="#">信息資源部</a></li>
     <li><a href="#">雙年展辦公室</a></li>
    </ul>
   </li>

   <li><a href="#" class="inactive">組織機構</a>
    <ul style="display: none">
     <li><a href="#" class="inactive active">美協(xié)機關</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="#">維權辦</a></li>
      </ul>
     </li> 
     <li><a href="#" class="inactive active">中國文聯(lián)美術藝術中心</a> 
      <ul>
       <li><a href="#">綜合部</a></li>
       <li><a href="#">大型活動部</a></li>
       <li><a href="#">展覽部</a></li>
       <li><a href="#">藝委會工作部</a></li>
       <li><a href="#">信息資源部</a></li>
       <li><a href="#">雙年展辦公室</a></li>
      </ul>
     </li>
     <li class="last"><a href="#">《美術》雜志社</a></li>
    </ul>
   </li>


   <li><a href="#" class="inactive">組織機構</a>
    <ul style="display: none">
     <li><a href="#" class="inactive active">美協(xié)機關</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="#">維權辦</a></li>
      </ul>
     </li>
     <li><a href="#" class="inactive active">中國文聯(lián)美術藝術中心</a>
      <ul>
       <li><a href="#">綜合部</a></li>
       <li><a href="#">大型活動部</a></li>
       <li><a href="#">展覽部</a></li>
       <li><a href="#">藝委會工作部</a></li>
       <li><a href="#">信息資源部</a></li>
       <li><a href="#">雙年展辦公室</a></li>
      </ul>
     </li>
     <li class="last"><a href="#">《美術》雜志社</a></li>
    </ul>
   </li>
  </ul>
 </div>
</body>
</html>

運行截圖為：

第二種變換形式是：一級菜單會互相影響，也就是一級菜單同時只能打開一個，其他都得處于關閉狀態(tài)。但是二級菜單下的開閉不會受到影響，也就是二級菜單本來是什么狀態(tài)，點擊任意一級菜單之后還是相應的狀態(tài)。

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>jQuery點擊展開收縮樹形菜單</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="#">中國美協(xié)章程</a></li>
   <li><a href="#" class="inactive active">中國文聯(lián)美術藝術中心</a>
    <ul>
     <li><a href="#">綜合部</a></li>
     <li><a href="#">大型活動部</a></li>
     <li><a href="#">展覽部</a></li>
     <li><a href="#">藝委會工作部</a></li>
     <li><a href="#">信息資源部</a></li>
     <li><a href="#">雙年展辦公室</a></li>
    </ul>
   </li>

   <li><a href="#" class="inactive">組織機構</a>
    <ul style="display: none">
     <li><a href="#" class="inactive active">美協(xié)機關</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="#">維權辦</a></li>
      </ul>
     </li> 
     <li><a href="#" class="inactive active">中國文聯(lián)美術藝術中心</a> 
      <ul>
       <li><a href="#">綜合部</a></li>
       <li><a href="#">大型活動部</a></li>
       <li><a href="#">展覽部</a></li>
       <li><a href="#">藝委會工作部</a></li>
       <li><a href="#">信息資源部</a></li>
       <li><a href="#">雙年展辦公室</a></li>
      </ul>
     </li>
     <li class="last"><a href="#">《美術》雜志社</a></li>
    </ul>
   </li>


   <li><a href="#" class="inactive">組織機構</a>
    <ul style="display: none">
     <li><a href="#" class="inactive active">美協(xié)機關</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="#">維權辦</a></li>
      </ul>
     </li>
     <li><a href="#" class="inactive active">中國文聯(lián)美術藝術中心</a>
      <ul>
       <li><a href="#">綜合部</a></li>
       <li><a href="#">大型活動部</a></li>
       <li><a href="#">展覽部</a></li>
       <li><a href="#">藝委會工作部</a></li>
       <li><a href="#">信息資源部</a></li>
       <li><a href="#">雙年展辦公室</a></li>
      </ul>
     </li>
     <li class="last"><a href="#">《美術》雜志社</a></li>
    </ul>
   </li>
  </ul>
 </div>
</body>
</html>

 

第三種變換形式是：一級菜單會互相影響，也就是一級菜單同時只能打開一個，其他都得處于關閉狀態(tài)。而且二級菜單也會受到影響，也就是當點擊一級菜單的時候，所有的二級菜單都會處于關閉的狀態(tài)。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>jQuery點擊展開收縮樹形菜單</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="#">中國美協(xié)章程</a></li>
      <li><a href="#" class="inactive active">中國文聯(lián)美術藝術中心</a>
        <ul>
          <li><a href="#">綜合部</a></li>
          <li><a href="#">大型活動部</a></li>
          <li><a href="#">展覽部</a></li>
          <li><a href="#">藝委會工作部</a></li>
          <li><a href="#">信息資源部</a></li>
          <li><a href="#">雙年展辦公室</a></li>
        </ul>
      </li>

      <li><a href="#" class="inactive">組織機構</a>
        <ul style="display: none">
          <li><a href="#" class="inactive active">美協(xié)機關</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="#">維權辦</a></li>
            </ul>
          </li> 
          <li><a href="#" class="inactive active">中國文聯(lián)美術藝術中心</a>  
            <ul>
              <li><a href="#">綜合部</a></li>
              <li><a href="#">大型活動部</a></li>
              <li><a href="#">展覽部</a></li>
              <li><a href="#">藝委會工作部</a></li>
              <li><a href="#">信息資源部</a></li>
              <li><a href="#">雙年展辦公室</a></li>
            </ul>
          </li>
          <li class="last"><a href="#">《美術》雜志社</a></li>
        </ul>
      </li>


      <li><a href="#" class="inactive">組織機構</a>
        <ul style="display: none">
          <li><a href="#" class="inactive active">美協(xié)機關</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="#">維權辦</a></li>
            </ul>
          </li>
          <li><a href="#" class="inactive active">中國文聯(lián)美術藝術中心</a>
            <ul>
              <li><a href="#">綜合部</a></li>
              <li><a href="#">大型活動部</a></li>
              <li><a href="#">展覽部</a></li>
              <li><a href="#">藝委會工作部</a></li>
              <li><a href="#">信息資源部</a></li>
              <li><a href="#">雙年展辦公室</a></li>
            </ul>
          </li>
          <li class="last"><a href="#">《美術》雜志社</a></li>
        </ul>
      </li>
    </ul>
  </div>
</body>
</html>

 

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

以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

相關文章

最新評論