怎么制作可折叠式在线客服框

我们做网站后，为了让用户更方便的与我们联系，往往需要在自己网站上添加一个在线客服框。在前面的建站教程中，我们介绍了很多在线客服框的制作方法，今天学做网站论坛分享一种可折叠式在线客服框制作方法。

先看下效果：

折叠前效果

折叠后效果

方法与步骤

1. 将以下的HTML代码放到自己网站的底部模板</body> 标签上方；

   
   <!--代码来源：学做网站论坛https://www.xuewangzhan.net/-->
   
   <div id="fdrdiv">
   
       <div id="bigg" style="color: rgb(0, 119, 195); font-size: 34px; position: absolute; top: -38px; right: 0px; display: none;" onclick="bigg()">+</div>
   
       <div id="smalll" style="color: rgb(0, 119, 195); font-size: 34px; position: absolute; top: -39px; right: 0px; display: block;" onclick="smalll()">-</div>
   
       <div id="fdrtit" style="display: block;">在线客服</div>
   
       <div id="fdrlist" style="display: block;">
   
           <ul>
   
       <li>
   
         <span>微信1
   
         <b>pujiws</b></span>
   
         <span><img src="https://www.pujiws.com/images/pjlx_07.jpg" alt="二唯码" /></span>
   
         </li>
   
         <li>
   
         <span>微信2 <b>pujiws2</b></span>
   
         <span><img src="https://www.pujiws.com/images/pjlx_07.jpg" alt="二唯码" /></span>
   
         </li>
   
       <li><span>QQ<b><a href="http://wpa.qq.com/msgrd?v=3&amp;uin=1322347026&amp;site=pujiws.com&amp;menu=yes" target="_blank" class="kfqq">1322347026</a></b> <b><a href="http://wpa.qq.com/msgrd?v=3&amp;uin=65774512&amp;site=pujiws.com&amp;menu=yes" target="_blank" class="kfqq">65774512</a></b>
   
       </span></li>
   
   
   
     </ul>
   
       </div>
   
   </div>
   
   

2. 将以下的CSS样式代码放到自己的CSS文件中，用于控制可折叠式在线客服框样式；

   
   #fdrdiv {width:110px;-moz-border-radius:3px; -webkit-border-radius:3px; border-radius:3px;position: fixed;top: 33%;right: 10px; border:1px solid #0077c3;background:#fff; -moz-box-shadow:2px 2px 2px #ccc; -webkit-box-shadow:2px 2px 2px #ccc; box-shadow:2px 2px 2px #ccc; z-index:99999999;font-family: microsoft yahei,Arial, Helvetica, sans-serif;
   
       -webkit-font-smoothing: antialiased;}
   
   #fdrtit { font-weight:bold; color:#fff; text-align:center;background:#0077c3; line-height:1.5em; padding:5px; font-size:1.05em; border-bottom:solid 1px #4bbc2e;font-size: 14px;}
   
   #fdrlist {padding:5px 10px;}
   
   #fdrlist ul li { overflow:hidden; padding:0px 0px; text-align:center; font-size:1.15em;}
   
   #fdrlist ul li a,#fdrlist ul li span { display:block;word-wrap:break-word ;word-break: break-all;}
   
   #fdrlist ul li span { padding:3px 0px; font-size:13px;}
   
   #fdrlist ul li a { padding:5px 0px;}
   
   #fdrlist li img{border: none;  height: auto;  width: 100%;}
   
   .kfqq{color:#4f4f4f;}
   
   

3. 将以下的JS代码也放到网站的底部模板</body> 标签上方；

   
   <script>
   
   function bigg(){
   
       var fdrtit=document.getElementById("fdrtit");fdrtit.style.display='block';
   
       var fdrlist=document.getElementById("fdrlist");fdrlist.style.display='block';
   
       var biggg=document.getElementById("bigg");biggg.style.display='none';
   
       var smallll=document.getElementById("smalll");smallll.style.display='block';
   
   }
   
   function smalll(){
   
       var fdrdiv=document.getElementById("fdrdiv");fdrdiv.style.border='none';
   
       var fdrtit=document.getElementById("fdrtit");fdrtit.style.display='none';
   
       var fdrlist=document.getElementById("fdrlist");fdrlist.style.display='none';
   
       var smallll=document.getElementById("smalll");smallll.style.display='none';
   
       var biggg=document.getElementById("bigg");biggg.style.display='block';
   
   }
   
   </script>
   
   

通过这三段代码，就可以在学习如何自己做网站时，制作出可折叠式在线客服框了。