Javascript ng2下拉菜单在angular2中不工作
我已经被困在这个问题上好几个小时了,变得非常绝望。我为一个学校项目制作了这个angular2应用程序,但我想做的是当我点击+按钮时,这个下拉菜单会下来,当我再次点击它,或者当我点击一个链接时,它会再次关闭。现在,它只是一直保持打开状态,当我点击它时,它什么也不做 我尝试过很多不同的方法,从ng2下拉列表到显示或隐藏菜单的javascript文件。我别无选择,对此感到非常沮丧 我已经为ng2下拉模块做了适当的导入,应该可以让它工作了。这可能是一些小而愚蠢的事情,但我看不出来 这是我的app.component,它以导航栏为模板。单击“我路由到其他html组件”Javascript ng2下拉菜单在angular2中不工作,javascript,html,angular,navigation,dropdown,Javascript,Html,Angular,Navigation,Dropdown,我已经被困在这个问题上好几个小时了,变得非常绝望。我为一个学校项目制作了这个angular2应用程序,但我想做的是当我点击+按钮时,这个下拉菜单会下来,当我再次点击它,或者当我点击一个链接时,它会再次关闭。现在,它只是一直保持打开状态,当我点击它时,它什么也不做 我尝试过很多不同的方法,从ng2下拉列表到显示或隐藏菜单的javascript文件。我别无选择,对此感到非常沮丧 我已经为ng2下拉模块做了适当的导入,应该可以让它工作了。这可能是一些小而愚蠢的事情,但我看不出来 这是我的app.c
@Component({
selector: 'ls-app',
styleUrls: ['./app/css/fonts.css','./app/css/sass.css'],
template: `
<header id="header">
<nav role='navigation' class="main-nav" id="main-nav">
<ul id="main-nav-list">
<div class="navgroup">
<li><a [routerLink]="['/home']"class="navlogo" href="./leagues/home.component.html"><img class="logo" src="./app/img/logo.png" alt="logo"></a></li>
</div>
<div class="navgroup">
<li>
<a [routerLink]="['/play']"class="navtitle" href="./leagues/play.component.html"><img class="imgMainNav" src="./app/img/play.svg" alt="play">Speel</a>
</li>
<li><a [routerLink]="['/stats']"class="navtitle" href="./leagues/stats.component.html"><img class="imgMainNav" src="./app/img/chart.png" alt="chart">Stats</a></li>
<li><a [routerLink]="['/leagues']"class="navtitle" href="./leagues/join-league.component.html"><img class="imgMainNav" src="./app/img/chart.png" alt="chart">Join League</a></li>
</div>
<div class="navgroup login">
<div class="add-button" dropdown [dropdownToggle]="true">
<div dropdown-open > +</div>
<ul class="dropdown" >
<a [routerLink]="['/account']"href="leagues/account.component.html"><li><i class="fa fa-check-square-o fa-2"></i>Mijn account</li></a>
<a [routerLink]="['/play']"href="leagues/play.component.html"><li><i class="fa fa-comments fa-2"></i>Plaats pronostiek</li></a>
<a [routerLink]="['/leagues']"href="leagues/join-league.component.html"><li><i class="fa fa-clipboard fa-2"></i>Nieuwe competitie</li></a>
<a href=""><li><i class="fa fa-user-plus fa-2"></i>Shop</li></a>
<a href=""><li><i class="fa fa-user-plus fa-2"></i>Log out</li></a>
</ul>
</div>
<li><a class="navtitle loginnav login-window" onclick="hierkomtdefunctievanjavascriptfile()" ><img class="imgMainNav" src="./app/img/fa-user.png" alt="login">Login/Register</a></li>
</div>
</ul>
</nav>
</header>
在模板中修改以下内容:
<div class="add-button" dropdown>
<div (click)="toggleDropdown()"> +</div>
<ul class="dropdown" *ngIf="showDropdown">
<a (click)="toggleDropdown()" [routerLink]="['/account']" href="leagues/account.component.html">
<li><i class="fa fa-check-square-o fa-2"></i>Mijn account</li>
</a>
<a (click)="toggleDropdown()" [routerLink]="['/play']" href="leagues/play.component.html">
<li><i class="fa fa-comments fa-2"></i>Plaats pronostiek</li>
</a>
<a (click)="toggleDropdown()" [routerLink]="['/leagues']" href="leagues/join-league.component.html">
<li><i class="fa fa-clipboard fa-2"></i>Nieuwe competitie</li>
</a>
<a (click)="toggleDropdown()" href="">
<li><i class="fa fa-user-plus fa-2"></i>Shop</li>
</a>
<a (click)="toggleDropdown()" href="">
<li><i class="fa fa-user-plus fa-2"></i>Log out</li>
</a>
</ul>
</div>
我建议您使用ng2引导的下拉功能。这很简单。选中此项:我们不允许使用任何引导:'(还有一个小问题:如果我打开它但不单击任何链接,它将保持打开状态,并且我可以在下拉列表仍然打开的情况下浏览我的页面。当单击下拉列表外的任何地方时,是否有快速关闭它的方法?@Thijs是的,只需添加
(blur)=“toggleDropdown()”
在
标签中,它应该可以工作!抱歉,但是(模糊)似乎没有任何作用:/@Thijs将+
替换为+
现在我的下拉列表中的链接不再工作了,但是它们也关闭了下拉列表:/抱歉,麻烦了
<div class="add-button" dropdown>
<div (click)="toggleDropdown()"> +</div>
<ul class="dropdown" *ngIf="showDropdown">
<a (click)="toggleDropdown()" [routerLink]="['/account']" href="leagues/account.component.html">
<li><i class="fa fa-check-square-o fa-2"></i>Mijn account</li>
</a>
<a (click)="toggleDropdown()" [routerLink]="['/play']" href="leagues/play.component.html">
<li><i class="fa fa-comments fa-2"></i>Plaats pronostiek</li>
</a>
<a (click)="toggleDropdown()" [routerLink]="['/leagues']" href="leagues/join-league.component.html">
<li><i class="fa fa-clipboard fa-2"></i>Nieuwe competitie</li>
</a>
<a (click)="toggleDropdown()" href="">
<li><i class="fa fa-user-plus fa-2"></i>Shop</li>
</a>
<a (click)="toggleDropdown()" href="">
<li><i class="fa fa-user-plus fa-2"></i>Log out</li>
</a>
</ul>
</div>
showDropdown: boolean = false;
toggleDropdown():void {
this.showDropdown = !this.showDropdown;
}