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

以下是一个用 JavaScript 实现侧边栏显示隐藏的示例：

HTML 代码：

<div class='sidebar'>
  <button id='toggle-btn'>Toggle Sidebar</button>
  <ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
  </ul>
</div>

CSS 代码：

.sidebar {
  position: fixed;
  top: 0;
  left: -200px;
  width: 200px;
  height: 100%;
  background-color: #333;
  color: #fff;
  padding: 20px;
  transition: all 0.3s ease-in-out;
}

.sidebar.show {
  left: 0;
}

.sidebar ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.sidebar li {
  margin: 10px 0;
}

JavaScript 代码：

var toggleBtn = document.getElementById('toggle-btn');
var sidebar = document.querySelector('.sidebar');

toggleBtn.addEventListener('click', function() {
  sidebar.classList.toggle('show');
});

这段 JavaScript 代码首先获取了按钮元素和侧边栏元素，然后给按钮元素添加了一个点击事件监听器，在点击时切换侧边栏元素的类名，从而实现侧边栏的显示和隐藏。具体来说，如果侧边栏元素没有'show'类名，则添加该类名，否则移除该类名。CSS 中定义了 '.sidebar.show' 选择器来控制侧边栏的显示和隐藏动画。