我的菜单工作正常。但是当我点击背景关闭菜单时，菜单X不断弹出。这是因为当我点击背景时，他不明白现在他是折叠的
基准：

<div ng-controller="mega_menu_controller">
    <nav class="main-menu navbar navbar-expand-lg fixed-top bg-white shadow">
        <div class="container container-lg-fluid">
            <a class="main-menu__logo navbar-brand d-flex align-items-center" href="{{ site.url }}"><span
                        class="icon-logo"></span></a>
            <button class="navbar-toggler collapsed p-0 mb-1" type="button" data-toggle="collapse"
                    data-target="#navbarsMenu" aria-controls="navbarsMenu" aria-expanded="false" aria-label="Toggle navigation" ng-click="toggle_menu(4)" >
                <span class="icon-bar top-bar"></span>
                <span class="icon-bar middle-bar"></span>
                <span class="icon-bar bottom-bar"></span>
            </button>
            <div class="navbar-collapse collapse main-menu__links w-100" id="navbarsMenu">
                {# MENU DESKTOP #}
                <ul class="nav nav-pills mx-auto desktop">
                    <!-- Artigos -->
                    <li class="dropdown menu-large nav-item">
                        <a href="" class="nav-link d-flex align-items-center"
                           ng-click="toggle_menu(1)" ng-class="{'active' : menu[1]}">Artigos
                            de Poupança <span class="icon-arrow-tip-down"></span></a>
                    </li>

Angular 代码：

app.controller('mega_menu_controller', ["$scope", function ($scope) {

    $scope.menu = [];

    $scope.display_background = false;

    $scope.toggle_menu = function (i) {
        $scope.menu.forEach(function (item, index) {
            if (index !== i)
                $scope.menu[index] = false;
        });

        if (i !== -1) {
            $scope.menu[i] = !$scope.menu[i];
            $scope.display_background = $scope.menu[i];
        } else
            $scope.display_background = false;
    }

}]);