Question

我的导航栏中有一个下拉菜单，我点击时会向其中添加show课程来打开和关闭。

这有效但需要用户再次单击该按钮才能关闭菜单。作为一个半解决方案，我现在会监听路由器更改并在路由更改时关闭菜单。

但是，如果点击菜单按钮以外的任何内容，我希望关闭菜单。这样用户可以点击背景来摆脱菜单。我如何实现这一目标？

<button class="btn btn-link nav-link dropdown-toggle" (click)="showDropdown=!showDropdown" id="navbarDropdown" role="button" >

<div class="dropdown-menu" [ngClass]="{'show': showDropdown}">

请不要使用jquery提供解决方案。我没有在这个项目中使用它。

Answer 1

您可以在下拉菜单中监听mouseout事件并将变量showDropdown设置为false。我的意思是：

<button class="btn btn-link nav-link dropdown-toggle" (click)="showDropdown=!showDropdown" id="navbarDropdown" role="button">

<div class="dropdown-menu" [ngClass]="{'show': showDropdown}" (mouseout)="showDropdown = false"> <!-- This --!>

希望可以帮助!!!

用户点击Angular 2+时关闭菜单

1 个答案: