jQuery多级accordion菜单如何实现指定选项激活时自动展开父级

核心实现逻辑 #

要实现激活链接对应的全路径父面板自动展开，不需要硬编码层级关系，从当前激活的链接元素出发，沿着DOM结构向上遍历匹配对应的手风琴容器，逐个展开即可，可兼容任意深度的多级菜单结构。

具体修改步骤 #

• 第一步：约定激活状态判定规则
  常用的两种激活识别方式二选一即可：
  • 开发路由跳转时，手动给当前选中的 <a> 链接添加 active 类标识
  • 不需要手动加类，直接通过当前页面URL和链接href自动匹配激活项
• 第二步：在原有jQuery的DOM加载完成回调中，新增自动展开逻辑
  原有点击切换的交互代码完全保留，只追加自动展开的处理代码，示例如下：

  $(document).ready(function() {
      var headers = ["H1","H2","H3","H4","H5","H6"];
      // 原有点击交互逻辑保留，仅补充激活链路的排除判断
      $(".accordion").click(function(e) {
          var target = e.target,
          name = target.nodeName.toUpperCase();
  
          if($.inArray(name,headers) > -1) {
              var subItem = $(target).next();
  
              var depth = $(subItem).parents().length;
              var allAtDepth = $(".accordion p, .accordion div").filter(function() {
                  if($(this).parents().length >= depth && this !== subItem.get(0)) {
                      // 激活链路内的父面板不执行收起操作
                      if(typeof $activeLink !== "undefined" && $(this).has($activeLink).length) {
                          return false;
                      }
                      return true; 
                  }
              });
              $(allAtDepth).slideUp("fast");
  
              subItem.slideToggle("fast",function() {
                  $(".accordion :visible:last").css("border-radius","0 0 0px 0px");
              });
              $(target).css({"border-bottom-right-radius":"0", "border-bottom-left-radius":"0"});
          }
      });
  
      // 新增：自动展开激活链接全路径父面板逻辑
      // 选择当前激活的a标签，两种场景适配
      // 场景1：手动给激活链接加了active类
      var $activeLink = $(".accordion a.active");
      // 场景2：URL自动匹配激活项，和上面的选择器二选一替换即可
      // var $activeLink = $(`.accordion a[href="${window.location.pathname}"]`);
  
      if ($activeLink.length) {
          // 从激活链接向上遍历，匹配所有手风琴结构的内容容器
          $activeLink.parents("div")
              // 筛选规则：容器必须紧跟对应的标题头（h1/h2...结构）
              .filter(function() {
                  const prevEl = this.previousElementSibling;
                  return prevEl && headers.includes(prevEl.nodeName.toUpperCase());
              })
              .show();
  
          // 给激活链路上的所有标题头补充和手动展开一致的圆角样式
          $activeLink.parents("div")
              .filter(function() {
                  const prevEl = this.previousElementSibling;
                  return prevEl && headers.includes(prevEl.nodeName.toUpperCase());
              })
              .prev("h1,h2,h3,h4")
              .css({"border-bottom-right-radius":"0", "border-bottom-left-radius":"0"});
      }
  });
  

• 第三步：交互细节对齐
  修正原有代码的深度收起逻辑：遍历所有需要收起的面板时，先判断面板内部是否包含激活链接，如果在激活链路上就跳过收起操作，避免自动展开的父面板被错误触发slideUp。

避坑提示 #

• 不要硬编码层级选择器：比如写死选择三层嵌套div做展开，一旦后续菜单增加新的嵌套层级，代码就会失效。基于DOM结构匹配的逻辑可以兼容任意深度的多级菜单。
• 保持视觉一致性：自动展开后的样式要和手动点击展开的效果完全统一，避免出现交互逻辑一致但样式错位的问题。

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