Question

我在Angular 6中有一个静态页面，其中有一些选项卡，单击元素时如何使移动菜单折叠？我需要类似jQuery代码的东西（我不能使用jQuery）。

$('.navbar-nav>li>a').on('click', function() {
  $('.navbar-collapse').collapse('hide');
});

我的导航菜单代码如下。

<ul class="navbar-nav w-100">
    <li class="nav-item">
        <a class="nav-link" href="#">
            <i class="fa fa-check mb-3"></i> Finance legal tax and HR
        </a>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="#">
            <i class="fa fa-check mb-3"></i> Information technology
        </a>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="#">
            <i class="fa fa-check mb-3"></i> Risk and cybersecurity
        </a>
    </li>
</ul>

Answer 1

您可以将click-event-handler与组件属性一起使用。

export class MyComponent{
 collpaseMenu: boolean = false;
}

并在您的模板中：

<button (click)="collapseMenu = !collapseMenu"></button>

<ul class="navbar-nav w-100" [hidden]="collapseMenu">...</ul>

Angular 6-单击可折叠移动菜单

1 个答案: