jQuery实现B2B网站后台管理系统侧导航

效果图

1.html部分

  
  
  
  





  账户概览
  

    

      产品管理
      

 
查看店铺
 
发布产品
 
查看产品
 
已卖出产品
      
    

    

      采购管理
      

 
发布采购
 
查看采购
 
已收到的报价单
 
我的报价单
 
已关注的店铺
 
已关注的商品
      
    

    

      询盘管理
      

 
收到的询盘
 
我的询盘
      
    

    

      订单管理
      

 
我的订单
 
退款申请
      
    

    

      金融管理
      

 
我的借贷
 
需求申请
 
我的申请
      
    

    

      安全管理
      

 
基本信息
 
认证信息
 
手机认证
 
银行卡认证
 
邮箱认证
 
密码修改
 
支付密码
 
收货地址
      
    

    

      评价管理
      

 
我的评价
      
    

    

      消息管理
      

 
我的消息
      
    

    

      统计管理
      

 
月贸易量
 
月订单量
      
    

    

      白条管理
      

 
开通白条
 
我的白条
 
订单列表
      
    
  

2.css部分

* {
 margin:0;
 padding:0;
 -webkit-box-sizing:border-box;
 -moz-box-sizing:border-box;
 box-sizing:border-box
}
body {
 background:#fff;
 font:12px Microsoft YaHei,arial,sans-serif
}
ul {
 list-style-type:none
}
a {
 color:#f39800;
 text-decoration:none
}
.list-title {
 display:inline-block;
 width:100%;
 max-width:200px;
 border-top:solid 1px #ccc;
 border-left:solid 1px #ccc;
 border-right:solid 1px #ccc;
 background:#fff;
 text-align:center;
 height:60px;
 line-height:60px;
 font-size:20px;
 color:#f39800;
 font-weight:700;
 cursor:pointer
}
h1 {
 color:#fff;
 font-size:24px;
 font-weight:400;
 text-align:center;
 margin-top:80px
}
h1 a {
 color:#f39800;
 font-size:16px
}
.accordion {
 width:100%;
 max-width:200px;
 border:solid 1px #ccc;
 background:#fff
}
.accordion .link {
 cursor:pointer;
 display:block;
 padding:15px 15px 15px 42px;
 color:#4d4d4d;
 font-size:14px;
 font-weight:700;
 border-bottom:1px solid #ccc;
 position:relative;
 -webkit-transition:all .4s ease;
 -o-transition:all .4s ease;
 transition:all .4s ease
}
.accordion li:last-child .link {
 border-bottom:0
}
.accordion li {
 cursor:pointer
}
.accordion li i {
 position:absolute;
 top:16px;
 left:12px;
 font-size:18px;
 color:#595959;
 -webkit-transition:all .4s ease;
 -o-transition:all .4s ease;
 transition:all .4s ease
}
.accordion li i.fa-chevron-down {
 right:12px;
 left:auto;
 font-size:16px
}
.accordion li.open .link {
 color:#f39800
}
.accordion li.open i {
 color:#f39800
}
.accordion li.open i.fa-chevron-down {
 -webkit-transform:rotate(180deg);
 -ms-transform:rotate(180deg);
 -o-transform:rotate(180deg);
 transform:rotate(180deg)
}
.submenu {
 display:none;
 background:#f5f5f5;
 font-size:14px
}
.submenu li {
 border-bottom:1px solid #d6d7dc
}
.submenu a {
 display:block;
 text-decoration:none;
 color:#666;
 padding:12px;
 padding-left:42px;
 -webkit-transition:all .25s ease;
 -o-transition:all .25s ease;
 transition:all .25s ease
}
.submenu a:hover,.submenu li.current a {
 background:#f39800;
 color:#fff
}

3.js部分

$(function() {
  var Accordion = function(el, multiple) {
    this.el = el || {};
    this.multiple = multiple || false;
    var links = this.el.find('.link');
    links.on('click', {
      el: this.el,
      multiple: this.multiple
    },
    this.dropdown)
  };
  Accordion.prototype.dropdown = function(e) {
    var $el = e.data.el;
    $this = $(this);
    $next = $this.next();
    $next.slideToggle();
    $this.parent().toggleClass('open');
    if (!e.data.multiple) {
      $el.find('.submenu').not($next).slideUp().parent().removeClass('open');
    }
  };
  var accordion = new Accordion($('#accordion'), false);
  $('.submenu li').click(function() {
    $(this).addClass('current').siblings('li').removeClass('current');
  });
});

以上就是jQuery实现B2B网站后台管理系统侧导航的详细内容，更多关于jQuery 实现侧导航的资料请关注考高分网其它相关文章！