侧边栏父菜单active类正常生效，子菜单selected类无法切换求助

问题根源 #

1. 选择器匹配错误：移除selected类时使用了.sidebar-subchild li，但你的HTML中不存在.sidebar-subchild这个容器类，实际子菜单的容器是.sidebar-subchild-collapse，导致旧的selected类无法被移除，始终停留在第一个子项上。
2. 事件冒泡干扰：子菜单项内的<a>标签会优先响应点击事件，可能导致li的点击逻辑触发异常；同时容器上的onclick="event.stopPropagation()"写法不够规范，建议统一在JS中处理。
3. 冗余依赖冲突：页面引入了两个不同版本的jQuery（3.2.1和3.3.1 slim），容易引发脚本冲突，建议只保留一个版本。

修复后的代码 #

JavaScript

// 父菜单active切换逻辑（保留原逻辑）
$(".sidebar_nav-main li").on("click", function() {
  $(".sidebar_nav-main li").removeClass("active");
  $(this).addClass("active");
});

// 修复后的子菜单selected切换逻辑
$(".sidebar-subchild-collapse li").on("click", function(e) {
  e.stopPropagation(); // 阻止事件冒泡到父级菜单，避免干扰折叠逻辑
  $(".sidebar-subchild-collapse li").removeClass("selected"); // 修正选择器，匹配实际容器
  $(this).addClass("selected");
});

// 若后续子菜单为动态生成，推荐使用事件委托写法（兼容性更强）：
// $(document).on("click", ".sidebar-subchild-collapse li", function(e) {
//   e.stopPropagation();
//   $(".sidebar-subchild-collapse li").removeClass("selected");
//   $(this).addClass("selected");
// });

可选HTML优化（统一类名+规范事件处理）

你当前子菜单项的类名不统一（gdc-sidebar_submenu-item与sidebar_submenu-item混用），建议统一类名方便后续维护，同时移除容器上的内联事件：

<div class="sidebar-subchild-collapse">
  <ul data-parent="#sidebar-accordion" id="sidebar_submenu" class="collapse sidebar_submenu">
    <li class="sidebar_submenu-item selected"><a href="#"><span>Menu 1</span></a></li>
    <li class="sidebar_submenu-item"><a href="#"><span>Menu 2</span></a></li>
  </ul>
</div>

效果验证 #

修复后点击不同子菜单项，selected类会正确从旧项移除并添加到当前点击的项上，背景色状态同步更新。

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