如何在点击HTML站点navbar外区域时关闭已展开的collapsed navbar

云原生阿岚

2026-9-28

点击导航栏外区域自动关闭折叠导航栏的实现方案

原代码失效原因

你编写的代码存在事件冒泡冲突问题：点击导航栏切换按钮、导航栏内部元素时，点击事件会向上冒泡到document节点，触发关闭逻辑，导致刚展开的导航栏立刻被收起，表现为代码不生效。同时需要兼容不同版本Bootstrap的collapse状态类差异。

正确实现代码

$(document).ready(function () {
    // 阻止导航栏切换按钮的点击事件冒泡，避免点击切换时触发外部关闭逻辑
    $('.navbar-toggle').click(function (event) {
        event.stopPropagation();
    });

    // 阻止导航栏折叠区域的点击事件冒泡，避免点击内部元素时关闭导航
    $('.navbar-collapse').click(function (event) {
        event.stopPropagation();
    });

    // 监听全局点击，仅当点击区域为导航栏外部时执行关闭
    $(document).click(function () {
        const $navCollapse = $('.navbar-collapse');
        // 兼容Bootstrap 3.x（in类）和4.x/5.x（show类）的展开状态判断
        if ($navCollapse.hasClass('in') || $navCollapse.hasClass('show')) {
            $navCollapse.collapse('hide');
        }
    });
});