Bootstrap 3 のナビゲーションバーを外側のクリックで折りたたむにはどうすればよいですか?

要素の外側をクリックして Bootstrap 3 ナビゲーションバーを折りたたむ

質問: 開いている Bootstrap 3 ナビゲーションバーの外側をクリックしたときに、そのナビゲーションバーを自動的に最小化するにはどうすればよいですか?限界?デフォルトでは、ナビゲーションバーの切り替えボタンを使用してのみ開閉できます。

例:

[例とコード](リンク)

最初の試行:

提供されたコードは、作業:

jQuery(document).click(function() {

});

jQuery('.navbar').click(function(event) {
    jQuery(".navbar-collapse").collapse('hide');
    event.stopPropagation();
});

解決策:

$(document).ready(function () {
    $(document).click(function (event) {
        var clickover = $(event.target);
        var _opened = $(".navbar-collapse").hasClass("navbar-collapse in");
        if (_opened === true & !clickover.hasClass("navbar-toggle")) {
            $("button.navbar-toggle").click();
        }
    });
});

説明:

このコード:

• の任意の場所でクリックをリッスンします。 document.
• ナビゲーションバーが開いており、クリックされた要素がナビゲーションバー切り替えボタンではないかどうかを確認します。
• 両方の条件が満たされる場合、事実上、ナビゲーションバー切り替えボタンのクリックをシミュレートします。ナビゲーションバーを折りたたむ。

このアプローチでは、ナビゲーションバーのアニメーションが保持され、さらに多くの機能が提供されます。 CSS クラスを手動で設定するよりもユーザーフレンドリーです。

以上がBootstrap 3 のナビゲーションバーを外側のクリックで折りたたむにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。