首页>>导航菜单>>Jquery侧边栏固定折叠导航(2020-08-24)

Jquery侧边栏固定折叠导航

Jquery侧边栏固定折叠导航
演示
下载
赞赏支持
立刻微信赞赏支持 关闭

 

 
XML/HTML Code
  1. <div class="nav">  
  2.             <div class="nav-top">  
  3.                 <div id="mini" style="border-bottom:1px solid rgba(255,255,255,.1)"><img src="images/mini.png" ></div>  
  4.             </div>  
  5.             <ul>  
  6.                 <li class="nav-item">  
  7.                     <a href="javascript:;"><i class="my-icon nav-icon icon_1"></i><span>网站配置</span><i class="my-icon nav-more"></i></a>  
  8.                     <ul>  
  9.                         <li><a href="javascript:;"><span>网站设置</span></a></li>  
  10.                         <li><a href="javascript:;"><span>友情链接</span></a></li>  
  11.                         <li><a href="javascript:;"><span>分类管理</span></a></li>  
  12.                         <li><a href="javascript:;"><span>系统日志</span></a></li>  
  13.                     </ul>  
  14.                 </li>  
  15.                 <li class="nav-item">  
  16.                     <a href="javascript:;"><i class="my-icon nav-icon icon_2"></i><span>文章管理</span><i class="my-icon nav-more"></i></a>  
  17.                     <ul>  
  18.                         <li><a href="javascript:;"><span>站内新闻</span></a></li>  
  19.                         <li><a href="javascript:;"><span>站内公告</span></a></li>  
  20.                         <li><a href="javascript:;"><span>登录日志</span></a></li>  
  21.                     </ul>  
  22.                 </li>  
  23.                 <li class="nav-item">  
  24.                     <a href="javascript:;"><i class="my-icon nav-icon icon_3"></i><span>订单管理</span><i class="my-icon nav-more"></i></a>  
  25.                     <ul>  
  26.                         <li><a href="javascript:;"><span>订单列表</span></a></li>  
  27.                         <li><a href="javascript:;"><span>打个酱油</span></a></li>  
  28.                     </ul>  
  29.                 </li>  
  30.             </ul>  
  31.         </div>  

 

JavaScript Code
  1. $(function(){  
  2.     // nav收缩展开  
  3.     $('.nav-item>a').on('click',function(){  
  4.         if (!$('.nav').hasClass('nav-mini')) {  
  5.             if ($(this).next().css('display') == "none") {  
  6.                 //展开未展开  
  7.                 $('.nav-item').children('ul').slideUp(300);  
  8.                 $(this).next('ul').slideDown(300);  
  9.                 $(this).parent('li').addClass('nav-show').siblings('li').removeClass('nav-show');  
  10.             }else{  
  11.                 //收缩已展开  
  12.                 $(this).next('ul').slideUp(300);  
  13.                 $('.nav-item.nav-show').removeClass('nav-show');  
  14.             }  
  15.         }  
  16.     });  
  17.     //nav-mini切换  
  18.     $('#mini').on('click',function(){  
  19.         if (!$('.nav').hasClass('nav-mini')) {  
  20.             $('.nav-item.nav-show').removeClass('nav-show');  
  21.             $('.nav-item').children('ul').removeAttr('style');  
  22.             $('.nav').addClass('nav-mini');  
  23.         }else{  
  24.             $('.nav').removeClass('nav-mini');  
  25.         }  
  26.     });  
  27. });  

 


原文地址:http://www.freejs.net/article_daohangcaidan_881.html