Angular2菜单引导

我已经建立了一个切换菜单，它的作品很好。 当用户单击链接时，我希望菜单再次折叠。 我通过自己的功能实现了这一点，这也起作用了

我现在遇到的问题是，当菜单折叠时，切换使用了一个很好的过渡。我使用show和hide，所以没有转换，我想转换w是由css在bootstrap中调节的，但我认为不是这样

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

这是我的密码：

<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>

切换导航


信息

关于

联系人

我的评论如下：如果要折叠菜单，请使用Jquery：

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

要在组件中使用Jquery，请在导入下面执行以下操作

declare var $: any;

---

引导应该管理转换。如果没有，那你就忘了什么！试着复制粘贴他们的导航，看看转换是否有效。如果确实如此，那么仔细看看你遗漏了什么。如果你想要你自己的折叠功能，我建议你看看@trichetriche yes bootstrap，当你点击切换时会进行转换，但我也想在菜单点击时使用转换，以获得平滑的折叠。或者我没有得到它，请看我的回答。他正在寻找Angular2中可能的解决方案。你能用angular2（打字脚本）更新它吗？这是angular2的解决方案。JQuery是一个Javascript库，这意味着除了声明这样的变量外，不能在Typescript中使用它。您仍然可以引用

JQueryStatic

，但这不是他所问的。@Trichetrich我应该在我的组件中的何处添加jqeury？正如我所说的，就在您的导入下面，键入

declare var$：any。简单地解释一下：
$
是一个全局变量，声明它允许您使用它（就像说
没问题，我知道这个变量要输入脚本）。如果要测试它，请在
ngOnInit（）
中添加
$（'body'）。单击（（）=>alert（'hello'）
然后点击你的页面，你会看到它工作了。我现在就试试！