js实现侧边栏滑动效果

实现侧边栏滑动效果的方法有很多，以下是其中一种基于 JavaScript 和 CSS 的方法：

HTML 结构：

<div class="sidebar">
  <!-- 侧边栏内容 -->
</div>

<div class="main-content">
  <!-- 主体内容 -->
</div>

<button class="toggle-btn">Toggle Sidebar</button>

CSS 样式：

.sidebar {
  position: fixed;
  top: 0;
  left: -300px; /* 侧边栏初始隐藏 */
  width: 300px;
  height: 100%;
  background-color: #ccc;
  transition: left 0.3s ease-in-out;
}

.main-content {
  margin-left: 0; /* 初始状态主体内容全屏 */
  transition: margin-left 0.3s ease-in-out;
}

.show-sidebar .sidebar {
  left: 0; /* 显示侧边栏 */
}

.show-sidebar .main-content {
  margin-left: 300px; /* 主体内容向右移动 */
}

JavaScript 代码：

const toggleBtn = document.querySelector('.toggle-btn');
const sidebar = document.querySelector('.sidebar');
const mainContent = document.querySelector('.main-content');

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

以上代码实现了一个基本的侧边栏滑动效果，点击 `toggle-btn` 按钮可以切换侧边栏的显示与隐藏。可以根据实际需求进行样式和交互的调整。