页面加载时隐藏菜单，onclick按钮显示菜单，第一次单击显示，第二次单击隐藏，例如在angular 4.0中切换

Question

页面加载导航应隐藏时，我正在使用导航默认值。 当我单击图标时，我想显示类似切换的导航。 当我从导航中移出鼠标时，我应该隐藏导航。 角度4.0。

index.html 
<button class='user_login' (click)='btnResult()'>
  <img src="./assets/menuicon.png" >
</button>

nav.component.html
<ul class="nav navbar-nav navbar-right menu" *ngIf="menu">
     <li ><a routerLink="one">one</a></li>
    <li><a routerLink="two">two</a></li>
    <li><a routerLink="three">three</a></li>
    <li><a routerLink="four">four</a></li>
    <li><a routerLink="five">five</a></li>
   <li><a routerLink="six">six</a></li>
 </ul>


nav.component.ts
import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-nav',
  templateUrl: './nav.component.html',
  styleUrls: ['./nav.component.css']
})
export class NavComponent implements OnInit {
    menu = false;
    constructor() { 
    btnResult(){
    this.menu = true;
    }
  }
  ngOnInit() {
  }

}

Answer 1

您可能应该看一下事件绑定（ Angular Event Bindings ）。

在组件的逻辑中创建一个绑定到元素的mouseleave的函数：

模板：

<ul (mouseleave)="hideMenu()">[...]</ul>

零件：

mouseleave(): void {
    this.menu = false
}

更新：

app-nav.component.html ：

<button (click)="showNavigationMenu()">Show</button>
<ul *ngIf="menuVisible" (mouseleave)="hideNavigationMenu()">
    [...]
</ul>

app-nav.component.ts ：

menuVisible: boolean

constructor() { this.menuVisible = false }

showNavigationMenu(): void {
    this.menuVisible = true
}

hideNavigationMenu(): void {
    this.menuVisible = false
}

柱塞：柱塞

Answer 2

车轮已经发明了！

Google的“ Bootstrap折叠导航栏”，您会发现许多方法可以使Bootstrap 3 CSS和jQuery库简化您的生活。

Answer 3

我希望这能帮到您。

<!DOCTYPE html>
    <html lang="en">
    <head>
      <title>Bootstrap menu</title>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
      <link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet" type="text/css">
      <link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet" type="text/css">
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
      </head>
    <body>

    <nav class="navbar navbar-default navbar-fixed-top">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>                        
          </button>
          <a class="navbar-brand" href="#myPage">Logo</a>
        </div>
        <div class="collapse navbar-collapse" id="myNavbar">
          <ul class="nav navbar-nav navbar-right">
            <li><a href="#about">ABOUT</a></li>
            <li><a href="#services">SERVICES</a></li>
            <li><a href="#portfolio">PORTFOLIO</a></li>
            <li><a href="#pricing">PRICING</a></li>
            <li><a href="#contact">CONTACT</a></li>
          </ul>
        </div>
      </div>
    </nav>
    </body>
    </html>

Answer 4

component.html

    <button (click)="toggle()" id="bt">
    {{buttonName}}
</button>

<ng-container *ngIf="show">
    <div style="margin: 0 auto;text-align: left;">
        <div>
            <label>Name:</label>
            <div><input id="tbname" name="yourname" /></div>
        </div>
        <div>
            <label>Email Address:</label>
            <div><input name="email" id="email" /></div></div>
        <div>
            <label>Additional Information (optional):</label>
            <div><textarea rows="5" cols="46"></textarea></div>
        </div>
    </div>
</ng-container>

component.ts

    import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  public show:boolean = false;
  public buttonName:any = 'Show';

  ngOnInit () {  }

  toggle() {
    this.show = !this.show;

    // CHANGE THE NAME OF THE BUTTON.
    if(this.show)  
      this.buttonName = "Hide";
    else
      this.buttonName = "Show";
  }
}

页面加载时隐藏菜单，onclick按钮显示菜单，第一次单击显示，第二次单击隐藏，例如在angular 4.0中切换

问题描述

4 个解决方案

解决方案1
0 2017-07-11 10:11:39

解决方案2
0 2017-07-11 10:59:38

解决方案3
0 2017-07-11 12:07:06

解决方案4
0 2019-10-01 10:17:31

页面加载时隐藏菜单，onclick按钮显示菜单，第一次单击显示，第二次单击隐藏，例如在angular 4.0中切换

问题描述

4 个解决方案

解决方案1 0 2017-07-11 10:11:39

解决方案2 0 2017-07-11 10:59:38

解决方案3 0 2017-07-11 12:07:06

解决方案4 0 2019-10-01 10:17:31

解决方案1
0 2017-07-11 10:11:39

解决方案2
0 2017-07-11 10:59:38

解决方案3
0 2017-07-11 12:07:06

解决方案4
0 2019-10-01 10:17:31