Bootstrap 3 の折りたたまれたナビゲーションバーを外側をクリックして閉じる方法?

外側をクリックしたときに折りたたまれたナビゲーションバーを閉じる

Bootstrap 3 で指定された領域の外側をクリックしたときに折りたたまれたナビゲーションバーを閉じるには、次の解決策を実行できます。実装:

このタスクは、ユーザーがナビゲーションバー要素を超えてクリックしたことを感知し、ナビゲーションバーの閉鎖をトリガーするメカニズムを確立することです。 jQuery(document).click(function()) と jQuery('.navbar').click(function()) を使用した最初の試みは、この目標を達成するには至りませんでした。

修正されたアプローチには、クリック イベントが組み込まれています。ドキュメント要素のリスナー:

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

このコードでは、クリックオーバーにより、クリックが発生した要素が決定されます。 _opened は、ナビゲーションバーが現在折りたたまれていて開いているかどうかを確認します。次に、ナビゲーションバーが開いていて、トグル ボタンの外側でクリックが発生した場合、ボタンはプログラムによってクリックされ、ナビゲーション バーの閉鎖がトリガーされます。

このソリューションは、スムーズな折りたたみアニメーションを実装し、クリック イベントのトグル ボタンへの伝播を停止します。基礎となる要素。境界外をクリックするとナビゲーションバーが確実に閉じます。

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