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