單擊外部時如何隱藏可折疊導航欄菜單（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();
});