0

私はうまく折りたためるシンプルなナビゲーションバーを持っています。メニューが折りたたまれているときは、以下のスクリプトを使用して、メニュー項目をクリックしたときにメニューを「自動的に非表示」にしています。

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

これはBS2では完璧に機能しましたが、メニューが完全に閉じなくなり、トグルボタンを2回クリックして再度開く必要があります. 違いがわかりにくいかもしれませんが、2枚目の写真を見てください。

閉店前メニュー：

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

1 に答える 1

0

試す：

$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
       $('.navbar-collapse').collapse('toggle');                    
});
于 2013-10-04T09:02:57.617 に答える