页面加载时隐藏菜单，onclick按钮显示菜单，第一次单击显示，第二次单击隐藏，例如在angular 4.0中切换
[英]hide menu when page loads, onclick button show menu, first click show, second click hide, like toggle in angular 4.0
问题描述
I am working on navigation default when page loads navigation should be hide. 
页面加载导航应隐藏时，我正在使用导航默认值。 When I click on icon I want to show navigation like toggle. 当我单击图标时，我想显示类似切换的导航。 when I mouse out from navigation I should hide navigation. 当我从导航中移出鼠标时，我应该隐藏导航。 angular 4.0. 角度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() {
}
}
4 个解决方案
解决方案1
0 2017-07-11 10:11:39
You should probably take a look at event bindings ( Angular Event Bindings ). 您可能应该看一下事件绑定（ Angular Event Bindings ）。
Create a function in the component's logic which binds to the element's mouseleave : 在组件的逻辑中创建一个绑定到元素的mouseleave的函数：
Template: 模板：
<ul (mouseleave)="hideMenu()">[...]</ul>
Component: 零件：
mouseleave(): void {
this.menu = false
}
Update : 更新 ：
app-nav.component.html : app-nav.component.html ：
<button (click)="showNavigationMenu()">Show</button>
<ul *ngIf="menuVisible" (mouseleave)="hideNavigationMenu()">
[...]
</ul>
app-nav.component.ts : app-nav.component.ts ：
menuVisible: boolean
constructor() { this.menuVisible = false }
showNavigationMenu(): void {
this.menuVisible = true
}
hideNavigationMenu(): void {
this.menuVisible = false
}
解决方案2
0 2017-07-11 10:59:38
The wheel has already been invented! 车轮已经发明了！
Google "Bootstrap Collapsing Navbar", and you'll find many ways to make your life simpler with the Bootstrap 3 CSS & jQuery library. Google的“ Bootstrap折叠导航栏”，您会发现许多方法可以使Bootstrap 3 CSS和jQuery库简化您的生活。
解决方案3
0 2017-07-11 12:07:06
I hope this will help you. 我希望这能帮到您。
<!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>
解决方案4
0 2019-10-01 10:17:31
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";
}
}
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.