如何在单击外部时隐藏可折叠导航栏菜单（Bootstrap 5）？

Question

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

<div class="collapse navbar-collapse" id="navbarCollapsible">
   .. menu items ..
</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 我怎么能做到呢？

我知道我在这里使用 jQuery，但我知道 Bootstrap 5 不需要它 - 那么我应该如何使用文档中描述的

hide

方法而不使用 jQuery？

Answer 1

错误是因为

navbarCollapsible

是 DOM 元素而不是 jQuery 对象。没有

hide

可用。

试试这个：

$('body').on("click", function() {
  $(navbarCollapsible).hide();
});

Answer 2

对于非 jQuery。

document.addEventListener('click', (event) => {
    const thisTarget = event.target;
    if (thisTarget.closest('#main-navbar')) {
        // if clicked inside main navbar element. do nothing.
    } else {
        // if clicked outside main navbar element. close it using Bootstrap way.
        new bootstrap.Collapse(document.getElementById('navbarSupportedContent'));
    }
});

将此

id

添加到主

<nav>

元素（参考 Bootstrap 5 文档）

<nav id="main-navbar" class="navbar navbar-expand-lg bg-body-tertiary">
...
</nav>