单击外部时如何隐藏可折叠导航栏菜单（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 不需要它 - 那么我应该如何在没有 jQuery 的情况下使用文档中描述的hide方法？

Answer 1

该错误是因为navbarCollapsible是 DOM 的一个元素，而不是 jQuery Object。没有hide可用。

试试这个：

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