jquery - Bootstrap 2 ---> 3 导航栏问题

Question

我有一个简单的导航栏，它可以正常折叠。当菜单折叠时，我使用下面的脚本在单击菜单项时“自动隐藏”菜单:

$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
    $('.navbar-collapse.in').removeClass('.in').css('height', '0');                     
});

这在 BS2 中运行完美，但现在菜单不再完全关闭，我必须在切换按钮上单击两次才能再次打开它。可能很难注意到差异，但请查看第二张图片的底部。

收盘前的菜单:

http://i.stack.imgur.com/tXeb8.png

关闭后的菜单:

http://i.stack.imgur.com/C1ZSu.png

HTML:

<nav class="navbar navbar-default" role="navigation">
    <div class="navbar-header">
        <a class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </a>
    </div>

    <div class="collapse navbar-collapse">
        <ul id="myTab" class="nav navbar-nav">
            <li class="active"><a href="#tab1" data-toggle="tab">Tab1</a></li>
            <li><a href="#tab2" data-toggle="tab">Tab2</a></li>
            <li><a href="#tab3" data-toggle="tab">Tab3</a></li>
            <li><a href="#tab4" data-toggle="tab">Tab4</a></li>
            <li><a href="#tab5" data-toggle="tab">Tab5</a></li>
            <li><a href="#tab6" data-toggle="tab">Tab6</a></li>
            <li><a href="#tab7" data-toggle="tab">Tab7</a></li>
        </ul>
        <ul class="nav navbar-nav navbar-right">
            <li><a href="#tab8" data-toggle="tab">Tab8</a></li>
        </ul>
    </div>
</nav>

Answer 1

尝试:

$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
       $('.navbar-collapse').collapse('toggle');                    
});