Bootstrap 3 の折りたたまれたナビゲーション メニューが、リンクをクリックした後も開いたままになるのはなぜですか?

Bootstrap 3 の折りたたまれたナビゲーション メニューをクリックしても開いたままになる

Bootstrap 3 のナビゲーション メニューには、小型デバイス向けに便利な折りたたみ機能があります。ただし、メニュー リンクをクリックした後もメニューが開いたままになることがあります。項目を選択した後にメニューを閉じたい場合、これはストレスになる可能性があります。

GitHub で人気のソリューションである以下のコードは、この問題を解決します。

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

このコードはバインドします。ドキュメントのイベント リスナー。展開された navbar-collapse 内の任意の要素のクリックをリッスンします。クリックされた要素がアンカー要素の場合は、メニューが折りたたまれます。

サブメニューの問題に対処するために、コードが次のように変更されました。

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

これにより、メニューのみが表示されるようになります。クリックされた要素がドロップダウン切り替えではなく直接リンクである場合、折りたたまれます。

以上がBootstrap 3 の折りたたまれたナビゲーション メニューが、リンクをクリックした後も開いたままになるのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。