如何使用 angularjs 操作导航栏引导程序 4 崩溃？

Posted 2023-03-24

【中文标题】如何使用 angularjs 操作导航栏引导程序 4 崩溃？

【英文标题】：How to manipulate navbar bootstrap 4 collapse with angularjs?

【发布时间】：2019-12-17 08:27:34

【问题描述】：

我的菜单运行良好。但是，当我单击背景关闭菜单时，菜单 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>

AngularJs 代码：

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;
    

]);

【问题讨论】：

当您说单击背景时，“背景”是什么意思？您能否包含复制问题的完整代码，这样可以更轻松地提供帮助

【参考方案1】：

我是这样解决的：

<div class="background-full position-fixed bottom-0 right-0 left-0 d-none" style="z-index:1029;"
     ng-class="'d-block d-lg-none animated fadeIn faster': display_background && menu[4]"
     ng-click="toggle_menu(-1)" data-toggle="collapse"
     data-target="#navbarsMenu"  >
</div>