Angular2 菜单引导程序

Question

我已经建立了一个带开关的菜单，它工作正常。 当用户单击链接时，我希望菜单再次折叠。 我通过使我自己的函数也能工作来做到这一点。

我现在遇到的问题是，当菜单折叠时，切换使用了一个很好的过渡。我使用 show 和 hide 所以没有过渡 我认为过渡 w 是由引导程序中的 css 调节的，但我认为情况并非如此。

如何在点击链接时向我的菜单添加漂亮的过渡。

这是我的代码：

<nav class="navbar navbar-default  navbar-static-top">
    <div class="container-fluid">
        <div class="navbar-header">
            <a class="navbar-brand" href="#">MyMenu</a>
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNav" >
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
        </div>
        <div class="collapse navbar-collapse" id="myNav">
            <ul class='nav navbar-nav navbar-right'>
                <li><a [routerLink]="['/info']" (click)="closeMenu()"></span><br/>Info</a></li>
                <li><a [routerLink]="['/aboutus']" (click)="closeMenu()"><br/>aboutus</a></li>
                <li><a [routerLink]="['/contact']" (click)="closeMenu()"><br/>contact</a></li>
            </ul>
        </div>
    </div>
</nav>

Answer 1

按照我的评论：如果要折叠菜单，请使用 Jquery 进行操作：

$('.nav a').on('click', function(){
    $('.btn-navbar').click(); //bootstrap 2.x
    $('.navbar-toggle').click() //bootstrap 3.x 
});

要在你的组件中使用 Jquery，在导入下面，做

declare var $: any;