外部クリックでブートストラップ ナビゲーションバーを閉じるにはどうすればよいですか?

ブートストラップを使用した外部クリックで開いているナビゲーションバーを閉じる

ブートストラップ 3 で折りたたまれたナビゲーションバーを操作する場合、閉じることができると便利ですナビゲーションバー領域の外側をクリックしてクリックします。これを実現するには、次の JavaScript コードを使用します。

$(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();
        }
    });
});

このコードは、すべてのドキュメントのクリックを監視します。ナビゲーションバー要素の外側のクリック (clickover 変数によって決定される) を検出すると、ナビゲーションバーが現在開いているかどうか (_opened) がチェックされます。ナビゲーションバーが開いており、クリックされた要素が「navbar-toggle」ボタンではない場合、トグル ボタンのクリックがトリガーされ、実質的にナビゲーションバーが閉じられます。

指定したコード スニペットは機能しないため、機能しません。ナビゲーションバーを閉じる前に、ナビゲーションバーがすでに開いているかどうかを確認しないでください。さらに、jQuery('.navbar').click(...) を使用します。これは、ナビゲーション バー内のクリックでも起動し、外部クリックによってナビゲーション バーが閉じられるのを防ぎます。

答えは、開いているナビゲーションバーの外側をクリックしたときにナビゲーションバーが閉じられるようにすることで、ユーザー エクスペリエンスとナビゲーション フローを向上させることができます。

以上が外部クリックでブートストラップ ナビゲーションバーを閉じるにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。