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执行此操作：

<input class="input__control" id="uniq14963212287341158594" name="login" placeholder="Логин" aria-labelledby="labeluniq14963212287341158594 hintuniq14963212287341158594" aria-required="true"></span></span></div><div class="auth__password"><span class="input input_theme_normal input_size_m i-bem" data-bem='{"input":{"live":false}}'><label class="input__hint input__hint_fallback_yes input__hint_visibility_visible" id="hintuniq14963212287341158595" for="uniq14963212287341158595" aria-hidden="true">Пароль</label><span class="input__box"><span class="input__clear" unselectable="on">&nbsp;</span><input class="input__control" id="uniq14963212287341158595" name="passwd" placeholder="Пароль" aria-labelledby="labeluniq14963212287341158595 hintuniq14963212287341158595" type="password" maxlength="256" aria-required="true"></span></span></div><div class="auth__row auth__row_button_yes"><div class="auth__haunter"><span class="checkbox checkbox_theme_normal checkbox_size_m i-bem" data-bem='{"checkbox":{"live":false}}'><button class="button2 button2_theme_action button2_size_m button2_type_submit i-bem" data-bem='{"button2":{"_tabindex":"0"}}' type="submit" autocomplete="off" tabindex="0"><span class="button2__text">Войти</span></button></div></div><div class="auth__social" role="group" aria-label="Войти при помощи социальной сети"></div><div class="auth__row"><div class="auth__remember"><a class="button2 button2_theme_pseudo button2_size_s button2_type_link i-bem" data-bem='{"button2":{"_tabindex":"0"}}' tabindex="0" href="https://passport.yandex.ru/restoration"><span class="button2__text">Вспомнить пароль</span></a></div><div class="auth__register"><a class="button2 button2_theme_pseudo button2_size_s button2_type_link i-bem" data-bem='{"button2":{"_tabindex":"0"}}' tabindex="0" href="https://passport.yandex.ru/registration"><span class="button2__text">Регистрация</span></a></div></div>

并将Jquery用于您的组件，在导入下方，执行

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

Angular2菜单引导程序

1 个答案: