如何让Bootstrap导航下拉菜单项在页面刷新后保持激活状态？

你的原有脚本只能处理直接挂载在navbar-nav下的普通菜单项，遇到下拉菜单里的子项时，没法把激活状态同步给它的父级下拉容器——这就是问题的根源。下面是调整后的完整解决方案：

$(document).ready(function () {
    var currentUrl = window.location.href;
    
    // 精准匹配当前页面的导航链接
    var activeLink = $('ul.navbar-nav a').filter(function() {
        return this.href === currentUrl;
    });
    
    // 给当前链接的直接父<li>添加active类
    activeLink.parent().addClass('active');
    
    // 检查当前激活的链接是否属于下拉菜单
    const dropdownParent = activeLink.closest('.dropdown');
    if (dropdownParent.length) {
        // 给父级下拉容器添加active类，让下拉项显示激活状态
        dropdownParent.addClass('active');
        // 可选：刷新后让下拉菜单保持展开（和Bootstrap的交互状态对齐）
        dropdownParent.find('.dropdown-toggle').attr('aria-expanded', 'true');
        dropdownParent.find('.dropdown-menu').addClass('show');
    }
});

核心改进点： #

• 简化匹配逻辑：去掉了重复的选择器代码，用filter统一处理所有导航链接，更简洁可靠
• 关联下拉父容器：通过closest('.dropdown')找到当前激活子项的父级下拉菜单容器，给它加上active类，这样顶部的下拉导航项就会显示激活样式
• 可选的展开状态：如果希望刷新页面后下拉菜单保持展开状态，可以保留后面两行代码，这会和Bootstrap原生的下拉交互状态保持一致

进阶优化（处理动态路由）： #

如果你的页面路由包含动态参数（比如referees/123这种带ID的路径），直接匹配完整URL可能会失效。这时候可以改成只匹配路径部分：

// 只提取URL的路径部分，忽略域名、查询参数和锚点
var currentPath = window.location.pathname;
var activeLink = $('ul.navbar-nav a').filter(function() {
    return this.pathname === currentPath;
});

这样不管URL里有没有额外参数，都能正确匹配到对应的导航项。

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