如何在外部點擊時折疊 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中文網其他相關文章！