原生JavaScript在线客服悬浮展开收缩

右侧悬浮的在线客服，挺常见的功能，尤其做企业官网或者商城时，总会用上这么一块。这个用原生 JavaScript实现的版本，没用任何库，代码量不大，逻辑也清晰，适合想练手或者搞点轻量级项目的你。

悬浮效果靠的就是position: fixed，直接把客服框钉在浏览器右侧，滚动页面也不会跑。加上点击事件监听，就能做到展开/收缩的切换，基本是前端交互的入门操作，熟悉 DOM 操作的你看一眼就能上手。

展开和收缩是靠切换样式控制的，比如设置宽度为0px就收缩，300px就展开，顺带还能加点动画过渡，让体验更丝滑。代码示例如下：

const chatBox = document.getElementById('chat-box');
chatBox.addEventListener('click', function() {
  if (chatBox.classList.contains('collapsed')) {
    chatBox.classList.remove('collapsed');
    chatBox.style.width = '300px';
  } else {
    chatBox.classList.add('collapsed');
    chatBox.style.width = '0px';
  }
});

这种写法挺直观的，不绕弯子。你要是想做成动画版，可以再配合CSS 的 transition属性，比如transition: width 0.3s ease，展开收缩更自然。

如果你有点强迫症，觉得原生 JS 不够优雅，也可以看看类似的jQuery 实现版本或蓝色悬浮客服窗口。不过这个纯 JS 版本胜在干净利落，不用加载额外资源，适合优化性能的小项目。

源文件打包在texiao1065_1560681010里，解压就能跑。你可以自己改样式、加客服图标，或者挂个聊天 API 试试看，扩展性也还不错。

如果你正想练练JS 事件绑定、DOM 操作和CSS 布局，那这个资源挺值得一试的，思路简单、上手快，还能顺便优化下页面体验。