jQuery新零售模式手风琴代码

基于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>

文件目录

本资源来自：代码 » 选项卡|滑动门 » jQuery新零售模式手风琴代码

注：此资源非帝国CMS模板/特效/源码，需要帝国CMS整站模板源码的小伙伴，请移步 帝国CMS模板，感谢支持！