基于jQuery绿色简洁风格的新零售介绍手风琴切换展示代码。京东到家模式，美团外卖模式，同城电商模式，社区新零售模式4种手风琴滑动切换效果。
使用方法：
1、head引入css文件
<link rel="stylesheet" type="text/css" href="statics/css/style.css" />
2、head引入js文件
<script src="statics/js/jquery-1.11.0.js" type="text/javascript" charset="utf-8"></script>
3、body引入HTML代码
<div class="section">
<div class="container">
<div class="mod-title">
<h2>适应多种O2O新零售模式</h2>
</div>
<ul class="mode-list">
<li class="mode-item mode-item-1 active">
<div class="mode-wrap">
<div class="mode-view">
<h3>京东到家模式</h3>
<h4>生鲜百货 极速送达</h4>
<i></i>
<ul>
<li>招商入驻</li>
<li>商业服务</li>
<li>LBS定位</li>
<li>平台协作</li>
</ul>
</div>
<div class="mode-detail">
<div class="detail-left">
<i></i>
<h3>京东到家模式</h3>
<h4>以京东到家的商业模式为蓝本 专注平台运营和推广，服务与配送都由商家提供</h4>
</div>
<div class="detail-right">
<ul>
<li>
<h3>招商入驻</h3>
<p>便捷招商、快速招纳优质商家<br>到平台入驻、丰富平台形象</p>
</li>
<li>
<h3>商业服务</h3>
<p>不同的商家在平台提供服务<br>给用户提供更多选择</p>
</li>
<li>
<h3>LBS定位</h3>
<p>用户可通过手机端LBS定位后<br>显示周边的店铺信息</p>
</li>
<li>
<h3>平台协作</h3>
<p>用户选择服务、商家提供服务<br>在平台完成协作需求</p>
</li>
</ul>
<a href="#" class="get">获取方案</a>
</div>
</div>
</div>
</li>
<li class="mode-item mode-item-2">
<div class="mode-wrap">
<div class="mode-view">
<h3>美团外卖模式</h3>
<h4>打造吃喝玩乐一站式商圈</h4>
<i></i>
<ul>
<li>整合商圈</li>
<li>种类齐全</li>
<li>团购促销</li>
<li>预约到店</li>
</ul>
</div>
<div class="mode-detail">
<div class="detail-left">
<i></i>
<h3>美团外卖模式</h3>
<h4>一个吃喝玩乐全都有的一站式团购平台，基于定位覆盖同城商圈的娱乐、生活服务</h4>
</div>
<div class="detail-right">
<ul>
<li>
<h3>整合商圈</h3>
<p>整合同城各类娱乐商圈及服务<br>在平台入驻、丰富平台资源</p>
</li>
<li>
<h3>种类齐全</h3>
<p>让用户在平台拥有更多的选择<br>促进平台的消费发展</p>
</li>
<li>
<h3>团购促销</h3>
<p>平台的店铺优惠满减活动促销<br>让用户更愿意通过平台下单</p>
</li>
<li>
<h3>预约到店</h3>
<p>用户在家即可预约到店，通过<br>验证码推送、即可到店服务</p>
</li>
</ul>
<a href="#" class="get">获取方案</a>
</div>
</div>
</div>
</li>
<li class="mode-item mode-item-3">
<div class="mode-wrap">
<div class="mode-view">
<h3>同城电商模式</h3>
<h4>集合本地特色服务与优势</h4>
<i></i>
<ul>
<li>本地服务</li>
<li>快速送达</li>
<li>质量保证</li>
<li>广告收入</li>
</ul>
</div>
<div class="mode-detail">
<div class="detail-left">
<i></i>
<h3>同城电商模式</h3>
<h4>集合本地特色服务与优势、找准方向定位、快速覆盖本地商圈打造同城电商平台</h4>
</div>
<div class="detail-right">
<ul>
<li>
<h3>本地服务</h3>
<p>每个城市都有当地的服务特色<br>能做好天猫京东做不到的优势</p>
</li>
<li>
<h3>快速送达</h3>
<p>京东天猫配送均为1天左右<br>同城配送可以最快1小时送达</p>
</li>
<li>
<h3>质量保证</h3>
<p>本地商品的质量用户更加清楚<br>因此更愿意信赖平台品质</p>
</li>
<li>
<h3>广告收入</h3>
<p>同城广告投放会更加精准有效<br>平台可获取更多的广告盈利</p>
</li>
</ul>
<a href="#" class="get">获取方案</a>
</div>
</div>
</div>
</li>
<li class="mode-item mode-item-4">
<div class="mode-wrap">
<div class="mode-view">
<h3>社区新零售模式</h3>
<h4>社区服务+社区交流+商圈</h4>
<i></i>
<ul>
<li>门店整合</li>
<li>周边服务</li>
<li>服务预约</li>
<li>评价晒单</li>
</ul>
</div>
<div class="mode-detail">
<div class="detail-left">
<i></i>
<h3>社区新零售模式</h3>
<h4>整合周边商家店铺、供消费者在平台选择，让周边实体商户都成为你的赚钱渠道</h4>
</div>
<div class="detail-right">
<ul>
<li>
<h3>门店整合</h3>
<p>整合社区周边的所有门店入驻<br>到你的平台、成为赚钱工具</p>
</li>
<li>
<h3>周边服务</h3>
<p>消费者轻松一览周边生活信息<br>在平台轻松付款下单</p>
</li>
<li>
<h3>服务预约</h3>
<p>消费者选择服务后一键预约<br>技师和配送员即可快速上门</p>
</li>
<li>
<h3>评价晒单</h3>
<p>服务完成后消费者可评价晒单<br>让其他消费者更了解服务情况</p>
</li>
</ul>
<a href="#" class="get">获取方案</a>
</div>
</div>
</div>
</li>
</ul>
</div>
</div>
<script type="text/javascript">
$(".section .mode-list .mode-item").hover(function() {
$(this).addClass("active").siblings().removeClass("active");
});
</script>
