jquery 侧边栏

使用 jQuery 创建侧边栏

基本 HTML 结构

创建一个简单的侧边栏结构，包含触发按钮和侧边栏内容。

<button id="sidebar-toggle">Toggle Sidebar</button>
<div id="sidebar">
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</div>

CSS 样式设置

为侧边栏添加基本样式，确保初始状态为隐藏。

#sidebar {
  width: 250px;
  height: 100vh;
  background: #333;
  color: white;
  position: fixed;
  left: -250px;
  transition: left 0.3s ease;
}
#sidebar.active {
  left: 0;
}

jQuery 切换功能

使用 jQuery 实现侧边栏的显示和隐藏。

$(document).ready(function() {
  $("#sidebar-toggle").click(function() {
    $("#sidebar").toggleClass("active");
  });
});

添加动画效果

如果需要更流畅的动画效果，可以结合 CSS 过渡或 jQuery 动画。

$(document).ready(function() {
  $("#sidebar-toggle").click(function() {
    $("#sidebar").animate({ left: $("#sidebar").hasClass("active") ? "-250px" : "0" });
    $("#sidebar").toggleClass("active");
  });
});

点击外部关闭侧边栏

点击页面其他区域时关闭侧边栏。

$(document).ready(function() {
  $("#sidebar-toggle").click(function(e) {
    e.stopPropagation();
    $("#sidebar").toggleClass("active");
  });
  $(document).click(function() {
    $("#sidebar").removeClass("active");
  });
});

响应式侧边栏

在移动设备上优化侧边栏显示。

@media (max-width: 768px) {
  #sidebar {
    width: 200px;
    left: -200px;
  }
}

通过以上方法，可以快速实现一个功能完整的 jQuery 侧边栏。