jQuery:显示侧边栏，推送主区域

// HTML结构
<div id="sidebar">侧边栏内容</div>
<div id="main">主区域内容</div>

// CSS样式
#sidebar {
  width: 200px;
  height: 100%;
  background-color: #f1f1f1;
  position: fixed;
  left: -200px;
  top: 0;
  transition: left 0.3s ease;
}

#main {
  margin-left: 0;
  transition: margin-left 0.3s ease;
}

// JavaScript代码
$(document).ready(function() {
  // 显示侧边栏
  function showSidebar() {
    $('#sidebar').css('left', '0');
    $('#main').css('margin-left', '200px');
  }

  // 隐藏侧边栏
  function hideSidebar() {
    $('#sidebar').css('left', '-200px');
    $('#main').css('margin-left', '0');
  }

  // 点击按钮切换侧边栏状态
  $('#toggleButton').click(function() {
    if ($('#sidebar').css('left') === '0px') {
      hideSidebar();
    } else {
      showSidebar();
    }
  });
});