jQuery实现侧边菜单栏的收缩和展开

以下是一个使用jQuery实现侧边菜单栏的收缩和展开功能的简单示例代码：

HTML:

<div class="sidebar">
  <div class="sidebar-header">
    <span class="sidebar-toggle-button">
      <i class="fa fa-bars"></i>
    </span>
  </div>
  <div class="sidebar-menu">
    <!-- 菜单项 -->
    <ul>
      <li><a href="#">首页</a></li>
      <li><a href="#">关于我们</a></li>
      <li><a href="#">服务</a></li>
      <li><a href="#">联系方式</a></li>
    </ul>
  </div>
</div>

CSS:

.sidebar {
  width: 200px; /* 侧边栏宽度 */
  background-color: #333;
  color: white;
  position: fixed;
  height: 100%;
  overflow: auto; /* 自动滚动条 */
  z-index: 1000; /* 确保侧边栏在顶层 */
}
 
.sidebar-header {
  padding: 20px;
  font-size: 18px;
  cursor: pointer;
}
 
.sidebar-menu ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
}
 
.sidebar-menu li a {
  display: block;
  color: white;
  padding: 8px 30px;
  text-decoration: none;
}
 
/* 隐藏菜单 */
.sidebar-menu.collapsed {
  display: none;
}

jQuery:

$(document).ready(function() {
  $('.sidebar-toggle-button').click(function() {
    $('.sidebar-menu').toggleClass('collapsed');
  });
});

在这个示例中，侧边栏默认是展开的。点击侧边栏顶部的按钮会切换.collapsed类，该类被设置为display: none;，从而隐藏菜单项，实现收缩菜单的效果。