Bootstrap Navbar Toggler -自定义JS使导航栏菜单在下拉单击时关闭

Bootstrap Navbar Toggler是Bootstrap框架中的一个组件，用于创建响应式导航栏菜单。它允许用户在移动设备上点击菜单按钮时，自动展开或折叠导航栏菜单。

使用自定义JS可以实现在下拉单击时关闭导航栏菜单的功能。具体实现步骤如下：

首先，为导航栏菜单按钮添加一个点击事件监听器。
在点击事件处理函数中，获取导航栏菜单的状态，判断当前菜单是否已经展开。
如果菜单已经展开，则使用Bootstrap提供的方法将菜单折叠起来。
如果菜单已经折叠，则不执行任何操作。

以下是一个示例代码，演示如何使用自定义JS实现导航栏菜单在下拉单击时关闭：

<!DOCTYPE html>
<html>
<head>
  <title>Bootstrap Navbar Toggler</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css">
</head>
<body>
  <nav class="navbar navbar-expand-lg navbar-light bg-light">
    <div class="container-fluid">
      <a class="navbar-brand" href="#">Logo</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">
        <ul class="navbar-nav">
          <li class="nav-item">
            <a class="nav-link" href="#">Home</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">About</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Services</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Contact</a>
          </li>
        </ul>
      </div>
    </div>
  </nav>

  <script>
    // 获取导航栏菜单按钮
    var navbarToggler = document.querySelector('.navbar-toggler');

    // 添加点击事件监听器
    navbarToggler.addEventListener('click', function() {
      // 获取导航栏菜单的状态
      var isExpanded = navbarToggler.getAttribute('aria-expanded');

      // 判断菜单是否已经展开
      if (isExpanded === 'true') {
        // 使用Bootstrap提供的方法将菜单折叠起来
        navbarToggler.click();
      }
    });
  </script>
</body>
</html>

在上述示例代码中，我们使用了Bootstrap框架提供的CSS和JavaScript库。通过自定义的JavaScript代码，我们为导航栏菜单按钮添加了一个点击事件监听器。在点击事件处理函数中，我们判断菜单的展开状态，并使用Bootstrap提供的方法将菜单折叠起来。

推荐的腾讯云相关产品：腾讯云云服务器（CVM）和腾讯云CDN。