☰

Bootstrap 3 の折りたたまれたメニューはクリックしても閉じません 質問する

tag-icon • tag-icon html css twitter-bootstrap navigation
Bootstrap 3 の折りたたまれたメニューはクリックしても閉じません 質問する

私はBootstrap 3からほぼ標準的なナビゲーションを持っています

<body data-spy="scroll" data-target=".navbar-collapse">
    <!-- ---------- Navigation ---------- -->
    <div class="navbar navbar-fixed-top" role="navigation">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                    <span class="sr-only">Toggle navigation</span>
                </button>
                <a class="navbar-brand" href="index.html"> <img src="#"></a>
            </div>
            <div class="navbar-collapse collapse">
                <ul class="nav navbar-nav navbar-right">
                    <li class="active"><a href="#home">Home</a></li>
                    <li><a href="#one">One</a></li>
                    <li><a href="#two">Two</a></li>
                    <li><a href="#three">Three</a></li>
                    <li><a href="#four">Four</a></li>
                </ul>
            </div>
        </div>
    </div>

小さいデバイスでは、通常どおり折りたたまれます。メニュー ボタンをクリックするとメニューが展開されますが、メニュー リンクをクリック (またはタッチ) すると、メニューは開いたままになります。もう一度閉じるには、どうすればよいですか?

ベストアンサー1

GitHub のソリューションからこれを共有すると、これが人気のある回答でした。

https://github.com/twbs/bootstrap/issues/9013#issuecomment-39698247

$(document).on('click','.navbar-collapse.in',function(e) {
    if( $(e.target).is('a') ) {
        $(this).collapse('hide');
    }
});

これはドキュメントに関連付けられているため、ready() で実行する必要はありません (メニューにリンクを動的に追加しても機能します)。また、メニューがすでに展開されている場合にのみ呼び出されます。メニューが開いてすぐに閉じるという奇妙な点滅が報告されていますが、これはメニューに "in" クラスがあるかどうかを確認していない他のコードによって発生します。

[2014-11-04 更新] どうやらサブメニューを使用する場合、上記は問題を引き起こす可能性があるため、上記は次のように変更されました。

$(document).on('click','.navbar-collapse.in',function(e) {
    if( $(e.target).is('a:not(".dropdown-toggle")') ) {
        $(this).collapse('hide');
    }
});

おすすめ記事