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 实现侧导航的资料请关注脚本之家其它相关文章！