jquery 侧边栏

jQuery 侧边栏实现方法

使用 jQuery 可以轻松实现侧边栏的展开、折叠和交互效果。以下是几种常见的实现方式：

基础侧边栏实现

HTML 结构示例：

<div class="sidebar">
  <ul>
    <li><a href="#">菜单项1</a></li>
    <li><a href="#">菜单项2</a></li>
  </ul>
</div>
<div class="main-content">
  <button class="toggle-sidebar">切换侧边栏</button>
</div>

CSS 样式：

.sidebar {
  width: 250px;
  height: 100vh;
  position: fixed;
  left: -250px;
  transition: all 0.3s ease;
}
.sidebar.active {
  left: 0;
}

jQuery 代码：

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

滑动侧边栏效果

更流畅的滑动效果可以通过 jQuery 的 animate 方法实现：

$('.toggle-sidebar').click(function(){
  var sidebar = $('.sidebar');
  if(sidebar.css('left') === '0px'){
    sidebar.animate({left: '-250px'}, 300);
  } else {
    sidebar.animate({left: '0px'}, 300);
  }
});

响应式侧边栏

添加响应式设计，在小屏幕下自动隐藏侧边栏：

function checkWindowSize() {
  if($(window).width() < 768) {
    $('.sidebar').css('left', '-250px');
  } else {
    $('.sidebar').css('left', '0');
  }
}

$(window).resize(checkWindowSize);
$(document).ready(checkWindowSize);

带遮罩层的侧边栏

添加点击外部关闭侧边栏的功能：

<div class="overlay"></div>

.overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.5);
  z-index: 999;
}

$('.toggle-sidebar').click(function(){
  $('.sidebar').toggleClass('active');
  $('.overlay').fadeToggle();
});

$('.overlay').click(function(){
  $('.sidebar').removeClass('active');
  $(this).fadeOut();
});

多级菜单侧边栏

实现带有子菜单的侧边栏：

$('.sidebar li.has-submenu').click(function(e){
  e.stopPropagation();
  $(this).find('ul.submenu').slideToggle();
});

这些方法可以根据具体需求组合使用，创建功能丰富的侧边栏导航。对于更复杂的需求，可以考虑使用专门的 jQuery 插件如 Sidr 或 mCustomScrollbar。