如何用AngularJS控制Bootstrap 4导航栏折叠？点击背景关菜单图标异常

我懂你的问题——点击背景关闭菜单后，导航栏的切换按钮（汉堡/X图标）一直保持X状态，这是因为点击背景时没有同步更新按钮对应的菜单状态，同时按钮的样式状态和AngularJS的菜单状态没绑定到位。我来帮你一步步修复：

1. 修复toggle_menu函数的逻辑 #

当前函数在点击背景（传入i=-1）时，只关闭了背景但没重置所有菜单状态，包括控制导航栏展开的menu[4]。修改函数，让它在i=-1时把所有菜单状态设为false：

app.controller('mega_menu_controller', ["$scope", function ($scope) {
  $scope.menu = [];
  $scope.display_background = false;
  
  $scope.toggle_menu = function (i) {
    if (i !== -1) {
      // 处理单个菜单的展开/折叠，同时关闭其他菜单
      $scope.menu.forEach(function (item, index) {
        if (index !== i) $scope.menu[index] = false;
      });
      $scope.menu[i] = !$scope.menu[i];
      $scope.display_background = $scope.menu[i];
    } else {
      // 点击背景时，关闭所有菜单并隐藏背景
      $scope.menu.forEach(function (item, index) {
        $scope.menu[index] = false;
      });
      $scope.display_background = false;
    }
  }
}]);

2. 绑定切换按钮的样式到AngularJS变量 #

原来的按钮依赖Bootstrap的data-toggle切换collapsed类，但这和AngularJS的状态不同步。我们用ng-class把按钮的collapsed类和menu[4]绑定，确保按钮样式和菜单状态一致：

<button class="navbar-toggler p-0 mb-1" type="button" 
        data-target="#navbarsMenu" aria-controls="navbarsMenu" 
        aria-expanded="{{menu[4]}}" aria-label="Toggle navigation" 
        ng-click="toggle_menu(4)" 
        ng-class="{'collapsed': !menu[4]}">
  <span class="icon-bar top-bar"></span>
  <span class="icon-bar middle-bar"></span>
  <span class="icon-bar bottom-bar"></span>
</button>

这里去掉了原本的静态collapsed类，改用ng-class：当menu[4]为false（菜单折叠）时，添加collapsed类显示汉堡图标；当menu[4]为true（菜单展开）时，移除collapsed类显示X图标。

3. 确保背景元素触发关闭逻辑 #

最后，给你的背景遮罩元素绑定ng-click事件，调用toggle_menu(-1)：

<!-- 假设这是你的背景遮罩元素 -->
<div class="menu-background" ng-if="display_background" ng-click="toggle_menu(-1)"></div>

这样点击背景时，就会触发关闭所有菜单的逻辑，同时更新按钮样式，让X图标变回汉堡图标。

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