为什么折叠菜单不下拉？

Question

我在创建折叠菜单时使用的是 bootstrap3，菜单没有下拉。

<nav class="navbar navbar-inverse navbar-static-top">
    <div class="container-fluid">
        <div class="navbar-header">
            <a routerLink="home" class="nav-link" routerLinkActive="active" class="navbar-brand"><img src="../../assets/img/logo.png" class="img-responsive logo" alt=""></a>
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="collapseMenu" aria-expanded="false" aria-controls="navbar">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>

        </div>
        <div id="collapseMenu" class=" collapse navbar-collapse">
            <ul class="nav navbar-nav navbar-left">
                <li><a routerLink="games" class="nav-link" routerLinkActive="active">Games</a></li>
            </ul>
        </div>
    </div>
</nav>

Answer 1

您需要在 TS 文件中添加一个属性以显示隐藏

  navbarCollapsed = true;

    toggleNavbarCollapsing() {
        this.navbarCollapsed = !this.navbarCollapsed;
    }

更新您的 HTML 使用 (click)="toggleNavbarCollapsing()

<nav class="navbar navbar-inverse navbar-static-top">
    <div class="container-fluid">
        <div class="navbar-header">
            <a routerLink="home" class="nav-link" routerLinkActive="active" class="navbar-brand"><img src="../../assets/img/logo.png" class="img-responsive logo" alt=""></a>
            <button type="button" class="navbar-toggle collapsed" (click)="toggleNavbarCollapsing()" data-toggle="collapse" data-target="collapseMenu" aria-expanded="false" aria-controls="navbar">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>

        </div>
        <div id="collapseMenu" class=" collapse navbar-collapse" [class.collapse]="navbarCollapsed">
            <ul class="nav navbar-nav navbar-left">
                <li><a routerLink="games" class="nav-link" routerLinkActive="active">Games</a></li>
            </ul>
        </div>
    </div>
</nav>

演示：https://stackblitz.com/edit/angular-bootstrap3-toggle

Answer 2

第一次安装jquery npm i jquery --保存

然后在angular.json文件中添加以下代码

enter code here

"scripts": [
 "node_modules/jquery/dist/jquery.min.js",
 "node_modules/bootstrap/dist/js/bootstrap.min.js"
 ]

为什么折叠菜单不下拉？

why collapse menu not dropping down?

angular-ui-bootstrap

angular