首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

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

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

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

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

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

代码语言:txt
复制
<!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。

  • 腾讯云云服务器(CVM):提供高性能、可扩展的云服务器实例,适用于各种应用场景。详情请参考:腾讯云云服务器
  • 腾讯云CDN:提供全球加速、高可用的内容分发网络服务,可加速网站、应用、音视频等内容的传输。详情请参考:腾讯云CDN
页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

领券