jquery插件实现可分组折叠-网站QQ在线客服代码

代码介绍：

可设置几十个QQ在线客服，可分组展示QQ客服，并且鼠标划过可展开与折叠，具体效果请查看演示。

把代码中必要的数字/文字信息修改为自己的信息，即可投入到自己的网站使用。

演示地址：

https://www.yizhanzzw.com/yanshi/kefu15/

演示效果图片：

代码如下：

<!-- 代码开始 www.yizhanzzw.com 易站站长网提供制作 --> 
<link rel="stylesheet" href="https://www.yizhanzzw.com/yanshi/kefu15/css/yizhanzzw.css" type="text/css">
<script type="text/javascript" src="https://www.yizhanzzw.com/yanshi/kefu15/js/jquery.js"></script>
<div oncontextmenu='return false' ondragstart='return false'>
<div class="topmenu">
  
  <div class="banner">
    <div id="ifocus">
      <div id="ifocus_pic">
        <ul>
          <li><a href="http://www.yizhanzzw.com//" target="_blank"><img alt="冰爽特卖
电信服务器租用" src="images/ad_large2.jpg"></a></li>
          <li style="margin:0 auto 5px auto;width:728px;clear:both;">
            <script type="text/javascript">BAIDU_CLB_fillSlot("175922");</script>
          </li>
          <li><a href="http://www.yizhanzzw.com//" target="_blank"></a></li>
          <li><a href="http://www.yizhanzzw.com//" target="_blank"></a></li>
          <li style="height:600px;"><a href="http://www.yizhanzzw.com//" target="_blank"></a></li>
        </ul>
      </div>
    </div>
  </div>
</div>

<div id="livechatv3" style="left: 1122px; " class="lco pngfix">
  <div id="lclist" style="display: none; ">
    <div style="width:160px; margin:100px auto auto 38px;">
      <div class="hd"></div>
      <div class="bd">
        <dl>
          <dt class=""><a href="http://www.yizhanzzw.com//">基础业务咨询</a></dt>
          <dd class="">
            <ul>
              <li class=""> <a target="blank" href="tencent://message/?uin=12345678&Site=ebadu&Menu=yes"><img border="0" src="http://wpa.qq.com/pa?p=1:12345678:10" alt="点击这里给我发消息"></a></li>
              <li class=""> <a target="blank" href="tencent://message/?uin=12345678&Site=ebadu&Menu=yes"><img border="0" src="http://wpa.qq.com/pa?p=1:12345678:10" alt="点击这里给我发消息"></a></li>
              <li class=""> <a target="blank" href="tencent://message/?uin=12345678&Site=ebadu&Menu=yes"><img border="0" src="http://wpa.qq.com/pa?p=1:12345678:10" alt="点击这里给我发消息"></a></li>
              <li class=""> <a target="blank" href="tencent://message/?uin=12345886&Site=ebadu&Menu=yes"><img border="0" src="http://wpa.qq.com/pa?p=1:12345886:10" alt="点击这里给我发消息"></a></li>
              <li class=""> <a target="blank" href="tencent://message/?uin=12345678&Site=ebadu&Menu=yes"><img border="0" src="http://wpa.qq.com/pa?p=1:12345678:10" alt="点击这里给我发消息"></a></li>
              <li class=""> <a target="blank" href="tencent://message/?uin=52663&Site=ebadu&Menu=yes"><img border="0" src="http://wpa.qq.com/pa?p=1:52663:10" alt="点击这里给我发消息"></a></li>
              <li class=""> <a target="blank" href="tencent://message/?uin=12345678&Site=ebadu&Menu=yes"><img border="0" src="http://wpa.qq.com/pa?p=1:12345678:10" alt="点击这里给我发消息"></a></li>
              <li class=""> <a target="blank" href="tencent://message/?uin=12345678&Site=ebadu&Menu=yes"><img border="0" src="http://wpa.qq.com/pa?p=1:12345678:10" alt="点击这里给我发消息"></a></li>
              <li class=""> <a target="blank" href="tencent://message/?uin=12345678&Site=ebadu&Menu=yes"><img border="0" src="http://wpa.qq.com/pa?p=1:12345678:10" alt="点击这里给我发消息"></a></li>
            </ul>
          </dd>
          <dt class=""><a href="http://www.yizhanzzw.com//">服务器相关咨询</a></dt>
          <dd class="">
            <ul>
              <li class=""><a target="blank" href="tencent://message/?uin=12345678&Site=ebadu&Menu=yes"><img border="0" src="http://wpa.qq.com/pa?p=1:12345678:10" alt="点击这里给我发消息"></a></li>
              <li class=""><a target="blank" href="tencent://message/?uin=12345678&Site=ebadu&Menu=yes"><img border="0" src="http://wpa.qq.com/pa?p=1:12345678:10" alt="点击这里给我发消息"></a></li>
              <li class=""><a target="blank" href="tencent://message/?uin=12345678&Site=ebadu&Menu=yes"><img border="0" src="http://wpa.qq.com/pa?p=1:12345678:10" alt="点击这里给我发消息"></a></li>
              <li class=""><a target="blank" href="tencent://message/?uin=12345678&Site=ebadu&Menu=yes"><img border="0" src="http://wpa.qq.com/pa?p=1:12345678:10" alt="点击这里给我发消息"></a></li>
              <li class=""><a target="blank" href="tencent://message/?uin=12345678&Site=ebadu&Menu=yes"><img border="0" src="http://wpa.qq.com/pa?p=1:12345678:10" alt="点击这里给我发消息"></a></li>
              <li class=""><a target="blank" href="tencent://message/?uin=12345678&Site=ebadu&Menu=yes"><img border="0" src="http://wpa.qq.com/pa?p=1:12345678:10" alt="点击这里给我发消息"></a></li>
              <li class=""><a target="blank" href="tencent://message/?uin=12345678&Site=ebadu&Menu=yes"><img border="0" src="http://wpa.qq.com/pa?p=1:12345678:10" alt="点击这里给我发消息"></a></li>
              <li class=""><a target="blank" href="tencent://message/?uin=12345678&Site=ebadu&Menu=yes"><img border="0" src="http://wpa.qq.com/pa?p=1:12345678:10" alt="点击这里给我发消息"></a></li>
              <li class=""><a target="blank" href="tencent://message/?uin=12345678&Site=ebadu&Menu=yes"><img border="0" src="http://wpa.qq.com/pa?p=1:12345678:10" alt="点击这里给我发消息"></a></li>
              <li class=""><a target="blank" href="tencent://message/?uin=12345678&Site=ebadu&Menu=yes"><img border="0" src="http://wpa.qq.com/pa?p=1:12345678:10" alt="点击这里给我发消息"></a></li>
            </ul>
          </dd>
          <dt class=""><a href="http://www.yizhanzzw.com//">云主机咨询</a></dt>
          <dd class="">
            <ul>
              <li class=""><a target="blank" href="tencent://message/?uin=12345678&Site=ebadu&Menu=yes"><img border="0" src="http://wpa.qq.com/pa?p=1:12345678:10" alt="点击这里给我发消息"></a></li>
              <li class=""><a target="blank" href="tencent://message/?uin=12345678&Site=ebadu&Menu=yes"><img border="0" src="http://wpa.qq.com/pa?p=1:12345678:10" alt="点击这里给我发消息"></a></li>
              <li class=""><a target="blank" href="tencent://message/?uin=12345678&Site=ebadu&Menu=yes"><img border="0" src="http://wpa.qq.com/pa?p=1:12345678:10" alt="点击这里给我发消息"></a></li>
              <li class=""><a target="blank" href="tencent://message/?uin=12345678&Site=ebadu&Menu=yes"><img border="0" src="http://wpa.qq.com/pa?p=1:12345678:10" alt="点击这里给我发消息"></a></li>
              <li class=""><a target="blank" href="tencent://message/?uin=12345678&Site=ebadu&Menu=yes"><img border="0" src="http://wpa.qq.com/pa?p=1:12345678:10" alt="点击这里给我发消息"></a></li>
              <li class=""><a target="blank" href="tencent://message/?uin=12345678&Site=ebadu&Menu=yes"><img border="0" src="http://wpa.qq.com/pa?p=1:12345678:10" alt="点击这里给我发消息"></a></li>
              <li class=""><a target="blank" href="tencent://message/?uin=12345678&Site=ebadu&Menu=yes"><img border="0" src="http://wpa.qq.com/pa?p=1:12345678:10" alt="点击这里给我发消息"></a></li>
              <li class=""><a target="blank" href="tencent://message/?uin=12345678&Site=ebadu&Menu=yes"><img border="0" src="http://wpa.qq.com/pa?p=1:12345678:10" alt="点击这里给我发消息"></a></li>
              <li class=""><a target="blank" href="tencent://message/?uin=12345678&Site=ebadu&Menu=yes"><img border="0" src="http://wpa.qq.com/pa?p=1:12345678:10" alt="点击这里给我发消息"></a></li>
              <li class=""><a target="blank" href="tencent://message/?uin=12345678&Site=ebadu&Menu=yes"><img border="0" src="http://wpa.qq.com/pa?p=1:12345678:10" alt="点击这里给我发消息"></a></li>
            </ul>
          </dd>
          <dt class=""><a href="http://www.yizhanzzw.com///">CDN咨询</a></dt>
          <dd class="">
            <ul>
              <li class=""><a target="blank" href="tencent://message/?uin=12345678&Site=ebadu&Menu=yes"><img border="0" src="http://wpa.qq.com/pa?p=1:12345678:10" alt="点击这里给我发消息"></a></li>
              <li class=""><a target="blank" href="tencent://message/?uin=12345678&Site=ebadu&Menu=yes"><img border="0" src="http://wpa.qq.com/pa?p=1:12345678:10" alt="点击这里给我发消息"></a></li>
              <li class=""><a target="blank" href="tencent://message/?uin=12345678&Site=ebadu&Menu=yes"><img border="0" src="http://wpa.qq.com/pa?p=1:12345678:10" alt="点击这里给我发消息"></a></li>
              <li class=""><a target="blank" href="tencent://message/?uin=12345678&Site=ebadu&Menu=yes"><img border="0" src="http://wpa.qq.com/pa?p=1:12345678:10" alt="点击这里给我发消息"></a></li>
              <li class=""><a target="blank" href="tencent://message/?uin=12345678&Site=ebadu&Menu=yes"><img border="0" src="http://wpa.qq.com/pa?p=1:12345678:10" alt="点击这里给我发消息"></a></li>
            </ul>
          </dd>
          <dt><a href="http://www.yizhanzzw.com//">备案咨询</a></dt>
          <dd>
            <ul>
              <li class=""><a target="blank" href="tencent://message/?uin=12345678&Site=ebadu&Menu=yes"><img border="0" src="http://wpa.qq.com/pa?p=1:12345678:10" alt="点击这里给我发消息"></a></li>
            </ul>
          </dd>
          <dt><a href="http://www.yizhanzzw.com//">大客户渠道咨询</a></dt>
          <dd>
            <ul>
              <li class=""> <a target="blank" href="tencent://message/?uin=12345678&Site=ebadu&Menu=yes"><img border="0" src="http://wpa.qq.com/pa?p=1:12345678:10" alt="点击这里给我发消息"></a> </li>
              <li class=""> <a target="blank" href="tencent://message/?uin=12345678&Site=ebadu&Menu=yes"><img border="0" src="http://wpa.qq.com/pa?p=1:12345678:10" alt="点击这里给我发消息"></a> </li>
            </ul>
          </dd>
          <dt class=""><a href="http://www.yizhanzzw.com/">售后服务</a></dt>
          <dd>
            <ul>
              <li><a target="blank" href="tencent://message/?uin=12345678&Site=ebadu&Menu=yes"><img border="0" src="http://wpa.qq.com/pa?p=1:12345678:10" alt="点击这里给我发消息"></a></li>
              <li><a target="blank" href="tencent://message/?uin=12345678&Site=ebadu&Menu=yes"><img border="0" src="http://wpa.qq.com/pa?p=1:12345678:10" alt="点击这里给我发消息"></a></li>
            </ul>
          </dd>
        </dl>
      </div>
      <div class="ft"></div>
    </div>
  </div>
  <div id="lcfd" class="lco pngfix"></div>
</div>
</div>
<script type="text/javascript">
$(document).ready(function(){
        var lcleft=$('.topmenu').offset().left+$('.topmenu').outerWidth();
        $("#livechatv3").css({"left":lcleft+"px"});
        
        $('#lclist').find('dt').click(function(){
                if($(this).next('.show').attr('class')==undefined){
                        $('.show').removeClass('show');
                        $('dt.current').removeClass('current');
                        $(this).addClass('current');
                        $(this).next('dd').addClass('show');
                }else{
                        $(this).removeClass('current');
                        $(this).next('dd').removeClass('show');
                }
                return false;
        });
        
        $('#livechatv3').hover(
                function(){
                        $(this).attr('class','lcc pngfix');
                        $("#livechatv3").css({"left":(lcleft-215)+"px"});
                        $('#lclist').show();
                },
                function(){
                        $(this).attr('class','lco pngfix');
                        $("#livechatv3").css({"left":lcleft+"px"});
                        $('#lclist').hide();
                }
        );
		
		$('#lcfd').toggle(
                function(){
                        $(this).attr('class','lcc pngfix');
                        $("#livechatv3").css({"left":(lcleft-215)+"px"});
                        $('#lclist').show();
                },
                function(){
                        $(this).attr('class','lco pngfix');
                        $("#livechatv3").css({"left":lcleft+"px"});
                        $('#lclist').hide();
                }
        );
		
        $('#lclist').find('dd').find('li').hover(
                function(){
                        $(this).attr('class','hover');
                },
                function(){
                        $(this).attr('class','');
                }
        );
        
        $('#lclist').find('dt').hover(
                function(){
                        //if($(this).attr('class')==undefined){
                                $(this).addClass('hover');
                        //}
                },
                function(){
                        //if($(this).next('.show').attr('class')==undefined){
                                $(this).removeClass('hover');
                        //}
                }
        );  
});
</script>

</div>
<!-- 代码结束 www.yizhanzzw.com 易站站长网提供制作 --> 

使用说明：

1.复制以上代码 从<!-- 代码 开始 --> 复制到<!-- 代码 结束 -->

2.建议将代码放入到网站的<body></body>或者<footer></footer>之间、或者网站后台有插入第三方统计代码的地方，也可以直接放入第三方统计代码中。

3.刷新已经放入的网站，即可生效。

代码修改提示说明：

1.代码中的图片地址只是为了展示效果采用本站的图片地址，正式使用的时候可以自定义修改为自己的图片地址。

2.代码中的CSS和JS引用链接地址，非必要，建议不要修改，本站地址永久有效，并且秒加载。

3.如果不能在代码中直接修改为自己的信息，那么只需要将本站引用的CSS/JS下载到本地即可实现修改使用。

4.如果是对代码没有基础的同学，建议只修改代码中的自己需要展示的信息即可，代码字符就请勿修改，以防止乱码不能正常显示。

5.如果是对代码有一定基础的同学，当然是想怎么改就怎么改啦~