如何在外部点击时关闭引导导航栏？

使用 Bootstrap 在外部单击时关闭打开的导航栏

在 Bootstrap 3 中使用折叠的导航栏时，能够关闭非常有用单击导航栏区域外部即可。为此，您可以使用以下 JavaScript 代码：

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

此代码监视所有文档点击。当它检测到导航栏元素外部的单击（由 clickover 变量确定）时，它会检查导航栏当前是否打开 (_opened)。如果导航栏打开并且单击的元素不是“导航栏切换”按钮，则会触发切换按钮的单击，从而有效地关闭导航栏。

您提供的代码片段不起作用，因为它确实有效在尝试关闭导航栏之前不检查导航栏是否已打开。此外，它使用 jQuery('.navbar').click(...)，它也会在导航栏中单击时触发，从而防止外部单击将其关闭。

通过利用 中提供的修改后的代码答案是，您可以确保打开的导航栏在您单击其外部时关闭，从而增强用户体验和导航流程。

以上是如何在外部点击时关闭引导导航栏？的详细内容。更多信息请关注PHP中文网其他相关文章！