почему свернуть меню не выпадает? - PullRequest
Новая
       14

почему свернуть меню не выпадает?

0 голосов
/ 27 апреля 2019

Я использую 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>

Ответы [ 2 ]

0 голосов
/ 27 апреля 2019

первая установка jquery Npm я JQuery - сохранить

затем добавьте следующий код в файл angular.json 

enter code here

"scripts": [
 "node_modules/jquery/dist/jquery.min.js",
 "node_modules/bootstrap/dist/js/bootstrap.min.js"
 ]
0 голосов
/ 27 апреля 2019

Вам необходимо добавить в файл 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

...