jQuery点击滑动展开侧边栏面板

点击按钮展开的侧边栏面板，滑动效果做得挺顺的，整体交互还不错。用的是熟悉的 jQuery，逻辑清晰，适合想快速加个功能模块的你。

侧边栏固定在屏幕左侧，初始用left: -200px藏起来，点击触发按钮后，再通过slideToggle动画滑出来。UI 逻辑简单，不容易出错。

代码核心就是监听按钮点击：

$('#toggleBtn').click(function() {
  $('#sidebar').slideToggle('slow', function() {
    if ($('#sidebar').is(':visible')) {
      $(this).css('left', '0');
    } else {
      $(this).css('left', '-200px');
    }
  });
});

动画用得经典，慢慢滑出来，再配合left值控制位置，页面切换时不会跳闪。用在侧边导航、设置面板都挺合适。

如果你还想看看别的类似效果，我挑了几个相关的：

• jQuery 滑动展开侧边固定面板代码.zip
• 11jQuery 滑动展开侧边固定面板代码
• jquery 点击展开的隐藏侧边栏导航菜单插件

用的时候注意下响应式设计，$(window).resize()加上媒体查询，移动端也能顺滑收放。

如果你正在搞一个带导航的管理后台或者工具页，这段代码直接贴上去就能用，改动小，体验也不错。