Bootstrap 3 の折りたたみ可能なナビゲーションバーを外部クリックで閉じる方法

Bootstrap 3 での外部クリックで折りたたみ可能なナビゲーションバーを閉じる

ナビゲーションバートグルのユーザーエクスペリエンスを強化するには、開いているナビゲーションバーを閉じる機能が含まれます。境界の外側をクリックします。提供されたコードは、document.click イベント リスナーを利用してこの問題に対処しようとします。ただし、現時点では、実装では目的の機能を実現するのに十分ではありません。

解決策:

次のコード スニペットは、ドキュメント全体のクリックを監視することで問題を効果的に解決します。クリックされた要素が navbar 要素内にあるかどうかを調べます。 navbar が開いており (「navbar-collapse in」クラスの存在によって決定されます)、クリックされた要素が「navbar-toggle」クラスを所有していない場合、click イベントは実質的に navbar-toggle ボタンのクリックをトリガーします。ナビゲーションバーを折りたたむ。

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

このアプローチには優雅さと機能性の両方が組み込まれており、クリック時に開いているナビゲーションバーをシームレスに閉じることができます。彼らの外部です。

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