垂直列表子项激活时保持父导航菜单展开的实现问题

我来帮你搞定这个导航展开的问题～你当前的脚本没生效主要是两个原因：代码执行顺序错误和选择器定位不准确，咱们一步步修正：

问题分析 #

1. 你先执行了展开has('.active-menu')元素的代码，但此时用来标记激活状态的.active-menu类还没被添加（添加逻辑在后面的$(function())里），所以这行代码根本找不到目标
2. 原选择器$('.nav-w ul li').children().has('.active-menu')没有精准定位到父项的展开容器

修正后的完整代码 #

JavaScript

// 点击父项切换子菜单展开/收起
$(".nav-w > ul > li > a").click(function() { 
  $(this).next().slideToggle(); 
});

$(function() {
  // 获取当前页面的路径
  var url = window.location.pathname;
  
  // 遍历所有导航链接，匹配URL添加激活类
  $(".nav-w ul li a").each(function() {
    var linkHref = $(this).attr("href");
    // 匹配当前路径或父项空链接
    if (linkHref === url || linkHref === "") {
      $(this).addClass("active-menu");
      
      // 如果是子项被激活，展开其父级菜单
      if (linkHref !== "") {
        // 找到子项所在的父级ul，设置为展开状态
        $(this).closest("ul").show();
      }
    }
  });
  
  console.log("当前页面路径: " + url);
});

说明修改点

• 调整执行顺序：把展开父菜单的逻辑移到添加.active-menu类之后，确保能找到已经标记的激活子项
• 精准定位父容器：用closest("ul")快速找到子项所属的父级ul，直接调用show()覆盖CSS默认的display: none
• 避免重复处理：加了linkHref !== ""的判断，防止父项自身被激活时重复执行展开逻辑

你可以直接替换原来的JS代码测试，这样当子项匹配当前页面URL时，父导航就会自动保持展开状态了～

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