Angular.js多级菜单激活异常求助：无法维持对应选中状态

我来帮你搞定这个菜单激活的问题！你的核心需求是：进入内页默认激活Home，点击Settings时，它的子菜单、子子菜单保持激活，同时其他菜单失活。咱们一步步来调整代码：

1. 修复Home菜单的激活逻辑 #

你当前用的ui-sref-active="active"会匹配所有dashboard的子状态（比如dashboard.settings），导致进入Settings页面时Home还保持激活。要让Home只在精确匹配dashboard根状态时激活，改用ui-sref-active-eq="active"：

<li ui-sref-active-eq="active"><a ui-sref="dashboard">Home</a></li>

ui-sref-active-eq只会在当前状态和ui-sref指定的状态完全一致时添加active类，完美符合你“进入子页面时Home失活”的需求。

2. 完善Settings菜单的嵌套结构与激活逻辑 #

你需要把子菜单、子子菜单用嵌套的<ul>结构展示出来，同时通过$state.includes和ui-sref-active来控制各层级的激活状态：

<div id="navbar" class="navbar-collapse collapse">
    <ul class="nav navbar-nav">
        <li ui-sref-active-eq="active"><a ui-sref="dashboard">Home</a></li>
        <!-- Settings顶级菜单 -->
        <li ng-class="{'active open': $state.includes('dashboard.settings')}">
            <a href="" ng-click="toggleSettingsMenu()">Settings</a>
            <!-- 子菜单：Manage Area -->
            <ul class="nav navbar-nav">
                <li ng-class="{'active open': $state.includes('dashboard.settings.area')}">
                    <a href="" ng-click="toggleAreaMenu()">Manage Area</a>
                    <!-- 子子菜单：Manage State & Manage City -->
                    <ul class="nav navbar-nav">
                        <li ui-sref-active="active"><a ui-sref="dashboard.settings.area.manageState">Manage State</a></li>
                        <li ui-sref-active="active"><a ui-sref="dashboard.settings.area.manageCity">Manage City</a></li>
                    </ul>
                </li>
            </ul>
        </li>
    </ul>
</div>

逻辑说明： #

• Settings顶级菜单：用$state.includes('dashboard.settings')，只要当前状态是dashboard.settings或其任意子状态（比如dashboard.settings.area.manageState），就添加active和open类，确保菜单高亮且展开。
• Manage Area子菜单：用$state.includes('dashboard.settings.area')，匹配area下的所有子状态，保持激活和展开。
• 子子菜单：直接用ui-sref-active="active"，自动匹配对应的精确状态，点击时自动高亮。

3. 可选：添加菜单折叠/展开的控制器逻辑 #

如果需要点击菜单时手动展开/折叠子菜单，可以在dashboardController里添加简单的变量控制：

Admin.controller('dashboardController', function($scope) {
    $scope.settingsMenuOpen = false;
    $scope.areaMenuOpen = false;

    $scope.toggleSettingsMenu = function() {
        $scope.settingsMenuOpen = !$scope.settingsMenuOpen;
    };

    $scope.toggleAreaMenu = function() {
        $scope.areaMenuOpen = !$scope.areaMenuOpen;
    };
});

然后把菜单的open类和这些变量绑定：

<li ng-class="{'active': $state.includes('dashboard.settings'), 'open': settingsMenuOpen}">
<!-- ... -->
<li ng-class="{'active': $state.includes('dashboard.settings.area'), 'open': areaMenuOpen}">

这样既可以通过状态自动激活，也支持手动折叠/展开。

4. 验证路由配置 #

你的路由配置是正确的嵌套状态，确保每个子状态的url是相对父状态的（比如dashboard.settings.area的url: '/area'会生成/dashboard/settings/area），这部分没问题。

这样调整后，就能实现：

• 进入dashboard时，Home激活，Settings未激活；
• 进入dashboard.settings.area.manageState时，Home失活，Settings、Manage Area、Manage State同时激活；
• 切换到Manage City时，Manage State失活，Manage City激活，父级菜单保持激活。

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