特效描述:jQuery侧边栏菜单 点击展开收缩 在线QQ客服代码,jQuery侧边栏,点击展开收缩qq客服代码
代码部署教程
1. 引入CSS
<link rel="stylesheet" type="text/css" href="css/index.css"/>
2. 引入JS
<script type="text/javascript" src="js/jquery-1.11.2.min.js"></script>
<script type="text/javascript" src="js/index.js"></script>
3. HTML代码
<div class="qq-client">
<a href="javascript:void(0);" class="qq-client-open">点<br/>击<br/>展<br/>开</a>
</div>
<div class="qq-client-content">
<h1>在线客户<span class="qq-client-close">关闭</span></h1>
<div class="qq-client-list">
<div class="client-list"><a href="#1"><label>小明:</label><span>点击联系</span></a> </div>
<div class="client-list"><a href="#2"><label>小明:</label><span>点击联系</span></a> </div>
<div class="client-list"><a href="#3"><label>小明:</label><span>点击联系</span></a> </div>
<div class="client-list"><a href="#4"><label>小明:</label><span>点击联系</span></a> </div>
<div class="client-list" style="border-bottom: none"><a href="#5"><label>小明:</label><span>点击联系</span></a> </div>
</div>
</div>
<div style="height:1000px;"></div>