如何在外部点击时折叠 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中文网其他相关文章！