JavaScript 实现侧边栏显示隐藏效果

#wrapper {
  display: flex;
}

#sidebar {
  width: 200px;
  background-color: #ccc;
  transition: all .3s ease-in-out;
}

#content {
  flex: 1;
}

#sidebar.hidden {
  transform: translateX(-200px);
}

var sidebar = document.getElementById('sidebar');
var toggleButton = document.getElementById('toggle-sidebar');

toggleButton.addEventListener('click', function() {
  sidebar.classList.toggle('hidden');
});

当用户单击'显示/隐藏侧边栏'按钮时，JavaScript代码将使用classList.toggle方法在侧边栏的元素上切换'hidden'类。'hidden'类设置了一个CSS转换，使侧边栏从屏幕上的左侧滑出或滑入。