使用jQuery实现可折叠侧边栏菜单独立展开功能

功能实现方案 #

你需要的「单个菜单点击独立控制、汉堡按钮一键展开所有」的功能可以通过以下修改实现：

调整后的JS代码 #

// 单个菜单项点击逻辑：仅操作当前点击项，不影响其他菜单状态
$('.side-menu li').on('click', 'a', function(e) {
  const $subMenu = $(this).parent().children('ul');
  if ($subMenu.length) {
    e.preventDefault();
    // 仅切换当前菜单的激活状态和子菜单显隐
    $(this).toggleClass('active');
    $subMenu.slideToggle();
    setTimeout(() => {
      $.fn.matchHeight._update();
      $.fn.matchHeight._maintainScroll = $(this).hasClass('active');
    }, 1000);
  }
});

// 汉堡按钮批量控制逻辑：保留原有侧边栏显隐功能，新增一键展开所有子菜单
$('button.uk-button').on('click', function() {
  // 对齐UIKit侧边栏动画时长，等待侧边栏状态切换完成后操作子菜单
  setTimeout(() => {
    const isSidebarOpen = !$('.collapse').is('[hidden]');
    if (isSidebarOpen) {
      // 侧边栏展开时，展开所有子菜单
      $('.side-menu li > a').addClass('active');
      $('.side-menu li > ul').slideDown();
    } else {
      // 侧边栏收起时，重置所有菜单状态
      $('.side-menu li > a').removeClass('active');
      $('.side-menu li > ul').slideUp();
    }
    $.fn.matchHeight._update();
  }, 300);
});

核心改动说明 #

• 合并了原代码中分开的激活/取消激活事件绑定，使用toggle类和slideToggle方法实现单个菜单的独立切换，全程仅操作当前点击的菜单项，完全不影响其他同级菜单的展开状态
• 新增汉堡按钮的批量控制逻辑，在原有UIKit侧边栏显隐切换的基础上，增加了所有子菜单的一键展开/收起功能，原有动画效果完全保留
• 优化了matchHeight更新逻辑，适配单个和批量操作两种场景

注意：现有HTML中汉堡按钮的id="btn "属性带有多余空格，建议移除空格避免后续选择器匹配异常。

内容的提问来源于stack exchange，提问作者amir