点击外部隐藏折叠导航栏？Bootstrap5无需jQuery实现方案

我有一个Bootstrap折叠导航栏菜单：

<div class="collapse navbar-collapse" id="navbarCollapsible">
   .. 菜单项 ..
</div>

希望实现点击导航栏外部时自动隐藏导航栏（而非仅点击菜单按钮时隐藏）。

最初尝试的代码及错误 #

最初写了这段代码，但出现报错：

$(document).ready(function() {
    const navbarCollapsible = document.getElementById('navbarCollapsible');    
    $('.container').on("click", function() {
        navbarCollapsible.hide();
    });
});

报错信息：

Uncaught TypeError: navbarCollapsible.hide is not a function

补充说明 #

我后来用这段代码实现了功能：

$(navbarCollapsible).collapse("hide");

但想知道不使用jQuery怎么实现？ 因为Bootstrap 5已经不需要依赖jQuery了，想按官方文档的方式使用hide方法。

解决方案 #

1. 错误原因 #

你遇到的报错是因为navbarCollapsible是原生DOM元素对象，而.hide()是jQuery专属方法，原生DOM对象没有这个方法，因此触发类型错误。

2. 原生JavaScript实现（Bootstrap 5 官方API） #

Bootstrap 5的折叠组件提供了原生JS API，直接通过Collapse类即可调用方法：

document.addEventListener('DOMContentLoaded', function() {
    // 获取折叠导航栏元素
    const navbarCollapsible = document.getElementById('navbarCollapsible');
    // 初始化Bootstrap折叠组件实例
    const collapseInstance = new bootstrap.Collapse(navbarCollapsible);

    // 监听全局点击事件
    document.addEventListener('click', function(e) {
        // 判断点击目标是否在导航栏内部或切换按钮上
        const isClickInsideNavbar = navbarCollapsible.contains(e.target);
        const navbarToggle = document.querySelector('.navbar-toggler');
        const isClickOnToggle = navbarToggle?.contains(e.target);
        
        // 点击外部且导航栏处于展开状态时，隐藏菜单
        if (!isClickInsideNavbar && !isClickOnToggle && collapseInstance._isShown) {
            collapseInstance.hide();
        }
    });
});

代码说明 #

• 用bootstrap.Collapse初始化折叠组件实例，这是Bootstrap 5原生API的标准用法
• 监听document的点击事件，排除导航栏内部和切换按钮的点击
• 满足条件时调用实例的hide()方法，触发折叠隐藏逻辑

3. 简化版（获取已初始化实例） #

如果页面中已经通过Bootstrap自动初始化了折叠组件（比如用了data-bs-toggle属性），可以直接获取已有实例：

document.addEventListener('DOMContentLoaded', function() {
    document.addEventListener('click', function(e) {
        const navbarCollapsible = document.getElementById('navbarCollapsible');
        const navbarToggle = document.querySelector('.navbar-toggler');
        
        const isClickOutside = !navbarCollapsible.contains(e.target) && !(navbarToggle?.contains(e.target));
        const isExpanded = navbarCollapsible.classList.contains('show');
        
        if (isClickOutside && isExpanded) {
            bootstrap.Collapse.getInstance(navbarCollapsible).hide();
        }
    });
});

bootstrap.Collapse.getInstance()会返回已存在的折叠组件实例，直接调用其hide()方法即可。

内容的提问来源于stack exchange，提问作者pileup