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

    
 账户概览
 
 
产品管理
 
查看店铺
发布产品
查看产品
已卖出产品
 
采购管理
 
发布采购
查看采购
已收到的报价单
我的报价单
已关注的店铺
已关注的商品
 
询盘管理
 
收到的询盘
我的询盘
 
订单管理
 
我的订单
退款申请
 
金融管理
 
我的借贷
需求申请
我的申请
 
安全管理
 
基本信息
认证信息
手机认证
银行卡认证
邮箱认证
密码修改
支付密码
收货地址
 
评价管理
 
我的评价
 
消息管理
 
我的消息
 
统计管理
 
月贸易量
月订单量
 
白条管理
 
开通白条
我的白条
订单列表

 * { 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 }

 $(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'); }); });