Bootstrap 5 导航栏在模糊时折叠不起作用

Question

作为初学者项目，我正在尝试使用 Bootstrap 5 编写站点导航栏。目前，在单击并展开导航栏后，当我单击离开时它不会折叠。我想对其进行编程，以便在我点击离开时导航栏会自动折叠。

但是，我当前的实现不起作用，我不明白为什么。

document.addEventListener("DOMContentLoaded",function() {
    document.querySelector(".navbar-toggler").addEventListener("blur", function (event) {
        var screenWidth = window.innerWidth;
        if (screenWidth < 768) {
            document.querySelector("#navbarNav").collapse;
        }
    });
});

<nav class="navbar navbar-expand-lg navbar-light bg-light">
    <div class="container-fluid">
        <a class="navbar-brand" href="index.html">
            <img width="30" height="30" src="https://static.thenounproject.com/png/3040233-200.png">
            App
        </a>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarNav">
            <div class="navbar-nav">
                <a class="nav-link" href="index.html">Home</a>
                <a class="nav-link" href="app-db.html">Discover</a>
                <a class="nav-link" href="#">Manage</a>
            </div>
        </div>
    </div>
</nav>

Answer 1

您可以使用 Bootstrap 自定义事件来实现此目的。

示例：https://codepen.io/alexpetergill/pen/b7a0e508af4b447a7d240a55d616d1e1

  const $navbarNav = $("#navbarNav");
  if ($navbarNav) {
    const navbarNavCollapse = (event) => {
      if (!$navbarNav.is(event.target) && $navbarNav.has(event.target).length === 0) {
        $navbarNav.collapse('hide');
        document.removeEventListener("mouseup", navbarNavCollapse);
      }
    }

    $navbarNav.on("shown.bs.collapse", () => {
      document.addEventListener("mouseup", navbarNavCollapse);
    });
  }

注意：这对某些事情使用 ES6 语法，因此如果不使用转译器，您将需要更改它！

Answer 2

我是这样做的：

    document.body.addEventListener('click', (() => {        
    let toggle = document.getElementById('navbar-toggler')
      if (!toggle.classList.contains('collapsed')) {
        const bsCollapse = new bootstrap.Collapse(menuToggle)
        bsCollapse.toggle()            
      }
    }), true)

Bootstrap 5 导航栏在模糊时折叠不起作用

Bootstrap 5 Navbar Collapse upon blur not working

html

javascript

bootstrap-5